如何实现从主视频停止的时间点继续播放其他视频？

嘿，我看了你的代码，现在没法实现「切换视频从之前停止的时间点继续播放」的核心问题很明确：你的代码完全没处理「记录播放进度」和「切换时同步进度」这两个关键环节。具体来说：

• 现有逻辑只做了视频的显示/隐藏和其他视频的暂停，完全没管时间同步的事
• 点击底部的demo小视频时，小视频自己会触发播放（因为是带controls的video标签），这会干扰主视频的切换逻辑

下面我给你修改好代码，同时一步步解释关键改动，保证你能理解：

修改后的完整代码 #

HTML 部分 #

<!DOCTYPE html>
<html>
<title>视频同步播放</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.demo {cursor:pointer;}
/* 用图片当缩略图更合理，避免video标签的默认播放干扰 */
.demo img {width:100%; display:block;}
</style>
<body>
<div class="w3-content" style="max-width:1200px">
  <video class="mySlides" src="video1.mp4" controls style="width:100%"></video>
  <video class="mySlides" src="video2.mp4" controls style="width:100%"></video>
  <video class="mySlides" src="video3.mp4" controls style="width:100%"></video>
  <video class="mySlides" src="video4.mp4" controls style="width:100%"></video>

  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <div class="demo w3-opacity w3-hover-opacity-off" onclick="currentDiv(2)">
        <img src="video2_thumb.jpg" alt="视频2缩略图">
      </div>
    </div>
    <div class="w3-col s4">
      <div class="demo w3-opacity w3-hover-opacity-off" onclick="currentDiv(3)">
        <img src="video3_thumb.jpg" alt="视频3缩略图">
      </div>
    </div>
    <div class="w3-col s4">
      <div class="demo w3-opacity w3-hover-opacity-off" onclick="currentDiv(4)">
        <img src="video4_thumb.jpg" alt="视频4缩略图">
      </div>
    </div>
  </div>
</div>

<script>
// 存储当前播放进度和播放状态
let currentPlayTime = 0;
let isPlaying = false;

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  
  // 第一步：记录当前活跃视频的进度和播放状态
  const activeVideo = document.querySelector('.mySlides[style="display: block;"]');
  if (activeVideo) {
    currentPlayTime = activeVideo.currentTime;
    isPlaying = !activeVideo.paused;
    activeVideo.pause();
  }
  
  // 隐藏所有视频 + 更新缩略图状态
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  
  // 第二步：给目标视频同步进度并还原播放状态
  const targetVideo = x[slideIndex-1];
  targetVideo.style.display = "block";
  targetVideo.currentTime = currentPlayTime;
  // 如果之前是播放状态，自动继续播放（处理浏览器自动播放限制）
  if (isPlaying) {
    targetVideo.play().catch(err => console.log("自动播放被浏览器阻止，请手动点击播放"));
  }
  
  dots[slideIndex-1].className += " w3-opacity-off";
}

// 实时更新播放进度（即使视频没暂停，切换时也能拿到最新时间）
document.addEventListener('timeupdate', function(e){
  if (e.target.classList.contains('mySlides')) {
    currentPlayTime = e.target.currentTime;
    isPlaying = !e.target.paused;
  }
}, true);

// 确保同一时间只有一个主视频在播放
document.addEventListener('play', function(e){
  if (!e.target.classList.contains('mySlides')) return;
  var videos = document.getElementsByClassName("mySlides");
  for(var i = 0, len = videos.length; i < len;i++){
    if(videos[i] != e.target){
      videos[i].pause();
    }
  }
}, true);
</script>
</body>
</html>

关键改动说明 #

1. 替换demo的video标签为图片缩略图
   原来的demo用video标签会导致点击时触发小视频播放，严重干扰主视频逻辑。换成图片缩略图既符合预览的需求，又避免了不必要的视频加载和交互冲突。

2. 新增进度与状态存储变量
   添加currentPlayTime存储当前播放的时间点，isPlaying记录当前是否处于播放状态，确保切换后不仅能同步进度，还能还原播放状态。

3. 在切换逻辑中加入进度同步
   在showDivs函数里，先记录当前活跃视频的进度和状态，再给目标视频设置currentTime = currentPlayTime，如果之前是播放状态，自动调用play()（同时处理了浏览器自动播放限制的异常）。

4. 实时更新播放进度
   监听主视频的timeupdate事件，实时更新currentPlayTime，确保即使视频一直在播放没有暂停，切换时也能同步到当前的时间点。

这样修改后，无论你在主视频播放到任意时间点切换，新视频都会从该时间点开始播放，完美实现你的需求。

内容的提问来源于stack exchange，提问作者Miloš Marković