Chrome 63中视频绘制至Canvas出现卡顿跳帧问题求助

我之前也碰到过Chrome更新后类似的视频帧同步卡顿问题！结合你的代码和现象，给你几个实测有效的解决方向：

1. 改用视频专用的帧同步API：requestVideoFrameCallback #

Chrome在较新版本中支持的requestVideoFrameCallback是专门为视频帧绘制同步设计的，比requestAnimationFrame更精准——它会在视频的每一帧实际准备好渲染时触发回调，完美解决RAF和视频帧不同步导致的跳帧问题。

修改后的代码示例：

var canvas, context, video;
function drawingLoop() {
  context.drawImage(video, 0, 0);
  // 用视频专属回调维持循环
  video.requestVideoFrameCallback(drawingLoop);
}

canvas = document.createElement('canvas');
document.body.appendChild(canvas);
video = document.createElement('video');

video.addEventListener("loadeddata", function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context = canvas.getContext('2d');
  video.play();
  drawingLoop(); // 直接启动循环
});

video.autoplay = false;
video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4";
video.load();

2. 给RAF增加帧变化判断，避免重复绘制 #

如果需要兼容不支持requestVideoFrameCallback的环境，可以在RAF循环中判断视频的播放时间是否变化，只在有新帧时执行drawImage：

var canvas, context, video, lastFrameTime = -1;
function drawingLoop() {
  window.requestAnimationFrame(drawingLoop);
  // 只有视频时间更新时才绘制
  if (video.currentTime !== lastFrameTime) {
    context.drawImage(video, 0, 0);
    lastFrameTime = video.currentTime;
  }
}

// 其余初始化代码和你原来的一致
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
video = document.createElement('video');

video.addEventListener("loadeddata", function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context = canvas.getContext('2d');
  video.play();
  window.requestAnimationFrame(drawingLoop);
});

video.autoplay = false;
video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4";
video.load();

3. 临时禁用Chrome硬件加速 #

有时候Chrome更新后硬件加速的渲染逻辑会和Canvas+视频的组合冲突，你可以试试：

• 打开Chrome设置，搜索「硬件加速」
• 关闭「使用硬件加速模式（如果可用）」选项
• 重启Chrome后测试

这个问题确实是Chrome 63版本前后出现的已知兼容问题，不少开发者都反馈过，上面的方法应该能解决你的卡顿跳帧问题。

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