如何使用JavaScript实现视频数组连续播放时长恰好为一小时？

我来帮你搞定这个精准控制播放时长的需求！核心思路是实时跟踪已播放的总时长，在每段视频播放前判断剩余可用时长：如果剩余时长足够完整播放当前视频，就正常播放；如果不够，就只播放到剩余时长用完的位置，同时停止后续视频的播放。

下面是修改后的完整代码，我标注了关键的新增逻辑：

<body onload="initVideoPlayer()">
<div id="section-title">
<video autoplay controls width="100%" height="auto">
<source src="" type="video/mp4">
</video>
</div>
<script>
var videoSources = [
  "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", 
  "http://www.html5videoplayer.net/videos/toystory.mp4", 
  "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", 
  "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", 
  "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" 
];
var currentIndex = 0;
const TARGET_DURATION = 3600; // 目标总时长：1小时 = 3600秒
let playedTime = 0; // 已播放的总时长
let video = document.getElementsByTagName('video')[0];

// 初始化播放器
function initVideoPlayer() {
  // 监听timeupdate事件，实时更新已播放时长
  video.addEventListener('timeupdate', updatePlayedTime);
  // 加载第一个视频
  loadNextVideo();
}

// 更新已播放总时长
function updatePlayedTime() {
  // 记录当前片段已播放的时长
  const currentSegmentPlayed = video.currentTime;
  // 修正总已播放时长（避免重复累加）
  playedTime = (playedTime - (video._previousCurrentTime || 0)) + currentSegmentPlayed;
  video._previousCurrentTime = currentSegmentPlayed;
  
  // 达到目标时长立即停止
  if (playedTime >= TARGET_DURATION) {
    video.pause();
    video.removeEventListener('ended', loadNextVideo);
    video.removeEventListener('timeupdate', updatePlayedTime);
  }
}

// 加载下一个视频（或处理当前视频的截取播放）
function loadNextVideo() {
  // 已达到目标时长则直接终止
  if (playedTime >= TARGET_DURATION) return;
  
  const remainingTime = TARGET_DURATION - playedTime;
  video.src = videoSources[currentIndex];
  
  video.onloadedmetadata = function() {
    const videoDuration = video.duration;
    
    if (videoDuration <= remainingTime) {
      // 剩余时长足够播放完整视频，正常启动播放
      playedTime += videoDuration; // 预加时长，后续timeupdate会精确修正
      video.play();
      // 单次监听视频结束事件，加载下一个视频
      video.addEventListener('ended', loadNextVideo, { once: true });
    } else {
      // 剩余时长不足，只播放到剩余时长的位置
      video.currentTime = 0;
      video.play();
      // 设置定时器，时间到后停止播放并清理监听
      setTimeout(() => {
        video.pause();
        video.removeEventListener('ended', loadNextVideo);
        video.removeEventListener('timeupdate', updatePlayedTime);
      }, remainingTime * 1000);
    }
    
    // 更新索引，准备下一个视频（如果需要）
    currentIndex = (currentIndex + 1) % videoSources.length;
  };
  
  video.load();
}
</script>
</body>

关键逻辑说明： #

• 时长精准跟踪：通过timeupdate事件实时同步已播放总时长，避免重复累加或计算误差。
• 剩余时长判断：每加载一个视频前先计算剩余可用时间，动态决定是完整播放还是截取播放。
• 终止机制：一旦已播放时长达到3600秒，立即暂停视频并移除所有相关事件监听，彻底停止后续播放流程。
• 事件优化：使用{ once: true }确保每个ended事件只触发一次，避免重复绑定导致的逻辑混乱。

这样修改后，你的视频数组就会恰好播放满一小时，时间到点后自动停止，不会继续循环播放啦！

内容的提问来源于stack exchange，提问作者Arun K Sharma