将暂停状态的HTML5 Video帧捕获到Canvas的最优方法

你遇到的这个问题本质是视频跳帧（seek）的异步特性导致的：当你修改currentTime后，浏览器需要异步解码目标时间对应的帧并渲染到视频元素上——哪怕视频处于暂停状态，这个过程也不会立刻完成。如果在修改currentTime后马上调用drawImage，拿到的其实还是修改前的旧帧，自然就出现了Canvas和视频画面不同步的情况。

用setTimeout临时凑合用虽然能解决部分场景，但延迟时间完全凭经验设置，在性能不同的设备上可能失效。下面两个方案更可靠：

方案一：监听seeked事件（推荐） #

视频元素在完成跳转到指定时间点后，会触发seeked事件。我们可以把Canvas绘制逻辑放在这个事件的回调里，确保拿到的是已经渲染完成的最新帧：

const video = document.getElementById('target-video');
const canvas = document.getElementById('output-canvas');
const ctx = canvas.getContext('2d');

// 封装跳转到指定时间并同步绘制的函数
function seekAndRender(time) {
  // 先移除之前的监听，避免重复触发
  video.removeEventListener('seeked', handleSeekComplete);
  // 设置目标时间
  video.currentTime = time;
  // 绑定完成事件
  video.addEventListener('seeked', handleSeekComplete);
}

function handleSeekComplete() {
  // 将当前视频帧绘制到Canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 解绑事件，避免内存泄漏
  video.removeEventListener('seeked', handleSeekComplete);
}

这个方案完全依赖浏览器的原生事件通知，没有硬编码的延迟，适配所有支持HTML5视频的浏览器，是最稳妥的选择。

方案二：用requestAnimationFrame轮询视频状态 #

如果某些特殊场景下seeked事件触发不及时（比如老旧浏览器、特殊编码的视频文件），可以用requestAnimationFrame来轮询视频的readyState，直到视频加载完成目标帧：

function seekAndRender(time) {
  video.currentTime = time;

  function checkAndRender() {
    // readyState为4表示视频已加载足够数据，包含目标帧
    if (video.readyState === 4) {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    } else {
      // 下一渲染周期继续检查
      requestAnimationFrame(checkAndRender);
    }
  }

  requestAnimationFrame(checkAndRender);
}

这种方式贴合浏览器的渲染节奏，比setTimeout更精准，不会出现过早或过晚绘制的问题。

最后提个小坑：如果你的视频是跨域资源，一定要确保服务器配置了正确的CORS响应头，否则drawImage会抛出安全错误，导致无法绘制帧。

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