如何用<video />元素实现视频多段起止播放？尝试事件监听未奏效

原生的<video>标签通过URL附加#t=start,end的方式只能指定单一段播放区间，没法直接设置多组起止时间。要实现你要的多段跳转播放，必须通过JavaScript结合video的API和事件监听来手动控制。

核心思路 #

通过监听video的timeupdate事件实时检查当前播放进度，当播放到当前片段的结束时间时，自动跳转到下一个片段的起始点并继续播放；同时处理播放完成、用户手动拖拽等边界情况。

完整实现代码 #

<video id="video" controls width="640">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video>

<script>
// 定义需要播放的多段时间区间
const segments = [
  { start: 10, end: 22 },
  { start: 25, end: 30 },
  { start: 34, end: 40 }
];

const video = document.getElementById('video');
let currentSegmentIndex = 0;

// 初始化：跳转到第一个片段的起始点
function initPlayback() {
  if (segments.length === 0) return;
  video.currentTime = segments[currentSegmentIndex].start;
  video.play().catch(err => console.error('播放失败:', err));
}

// 检查当前播放进度，处理片段跳转
function checkSegmentProgress() {
  const currentSegment = segments[currentSegmentIndex];
  // 允许微小的时间误差，避免因为timeupdate触发间隔导致跳转不及时
  if (video.currentTime >= currentSegment.end - 0.1) {
    currentSegmentIndex++;
    if (currentSegmentIndex < segments.length) {
      // 跳转到下一个片段的起始点并继续播放
      video.currentTime = segments[currentSegmentIndex].start;
      video.play().catch(err => console.error('播放失败:', err));
    } else {
      // 所有片段播放完成，停止视频
      video.pause();
    }
  }
}

// 处理用户手动拖拽进度条的情况：修正到最近的有效片段
function handleSeeked() {
  let targetSegment = null;
  // 遍历片段，找到当前时间所在的有效区间
  for (let i = 0; i < segments.length; i++) {
    const seg = segments[i];
    if (video.currentTime >= seg.start && video.currentTime <= seg.end) {
      targetSegment = i;
      break;
    }
  }
  if (targetSegment !== null) {
    currentSegmentIndex = targetSegment;
  } else {
    // 如果当前时间不在任何片段内，跳转到下一个未播放的片段起始点
    for (let i = 0; i < segments.length; i++) {
      if (segments[i].start > video.currentTime) {
        currentSegmentIndex = i;
        video.currentTime = segments[i].start;
        break;
      }
    }
  }
}

// 绑定事件监听
video.addEventListener('loadedmetadata', initPlayback);
video.addEventListener('timeupdate', checkSegmentProgress);
video.addEventListener('seeked', handleSeeked);
</script>

关键细节说明 #

1. timeupdate事件：该事件会在视频播放进度更新时触发（通常每秒触发4-6次），用来实时检查是否到达当前片段的结束时间。
2. 时间误差处理：判断时用>= currentSegment.end - 0.1而不是严格等于，避免因为事件触发间隔导致错过跳转时机。
3. 用户拖拽处理：通过seeked事件监听用户手动拖拽进度条的操作，自动修正到最近的有效播放片段，保证播放逻辑不被打断。
4. 播放错误捕获：调用video.play()时要捕获可能的错误（比如浏览器的自动播放策略限制）。

常见问题排查 #

如果你之前尝试监听事件没成功，可能是以下原因：

• 事件绑定时机不对：要等loadedmetadata事件触发后再初始化播放，确保视频元数据已加载完成。
• 跳转后没有调用play()：视频跳转后会暂停，需要手动调用play()恢复播放。
• 时间判断逻辑太严格：用精确相等===会因为currentTime的浮点数精度问题导致无法触发跳转。

内容的提问来源于stack exchange，提问作者Duderino9000