如何确保两个<video>标签视频无延迟同步播放？

这个问题我之前做视频拼贴预览时也遇到过！你当前的代码是循环调用每个视频的play()，但浏览器对每个play()请求的处理是异步的，再加上视频加载状态不一致，很容易出现播放不同步的情况。要实现无延迟同步播放，得从预加载准备和同步触发两个方面入手，下面是具体的解决方案：

核心问题分析 #

原代码的问题在于：

• play()方法返回的是Promise，浏览器处理每个视频的播放请求存在时间差
• 没有等待视频加载完成就触发播放，缓冲不足会导致延迟
• 循环中未声明i变量，会产生全局变量污染（小问题但需要修正）

解决方案步骤 #

1. 先确保所有视频加载完成 #

我们需要等待每个视频都处于canplaythrough状态（即已加载足够数据可以流畅播放），避免因缓冲导致的播放延迟。

2. 统一视频起始位置 #

播放前将所有视频暂停并重置到currentTime = 0，保证所有视频从同一时间点启动。

3. 同步触发播放请求 #

使用requestAnimationFrame在同一浏览器渲染帧内触发所有视频的播放，最大程度缩小播放启动的时间差。

完整代码示例 #

// 初始化数据和全局变量
const Data = { num_files: 2 };
const Video = { preview: {} };
// 获取所有视频元素
const videos = Array.from(document.querySelectorAll('video'));
let allVideosReady = false;

// 等待所有视频加载完成
Promise.all(videos.map(vid => new Promise(resolve => {
  // 如果视频已经加载完成，直接resolve
  if (vid.readyState >= 4) { // HAVE_ENOUGH_DATA
    resolve();
  } else {
    // 监听canplaythrough事件，确保视频可流畅播放
    vid.addEventListener('canplaythrough', resolve, { once: true });
  }
}))).then(() => {
  allVideosReady = true;
  // 预暂停并重置所有视频到起始位置
  videos.forEach(vid => {
    vid.pause();
    vid.currentTime = 0;
    // 可选：设置静音避免浏览器自动播放限制（如果视频带音频）
    vid.muted = true;
  });
});

// 实现同步播放逻辑
Video.preview.play_all = function() {
  if (!allVideosReady) {
    console.log("视频还未加载完成，请稍等");
    return;
  }
  // 在同一渲染帧内触发所有视频播放
  requestAnimationFrame(() => {
    videos.forEach(vid => {
      // 播放时捕获可能的错误（比如自动播放限制）
      vid.play().catch(err => {
        console.error("视频播放失败:", err);
      });
    });
  });
};

额外优化建议 #

• 处理浏览器自动播放政策：现代浏览器要求播放带音频的视频必须由用户交互触发（比如点击按钮），你的"Play All"按钮本身是用户交互，符合要求，但如果视频有音频，建议设置muted属性避免触发限制。
• 高精度同步（可选）：如果需要更精准的同步（比如视频和音频严格对齐），可以结合Web Audio API的时间线来控制，利用音频上下文的时间基准来同步所有视频的播放时间。

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