javascript - 在另一个窗口的 <canvas> 中显示 <video> - 如何实现全帧率？

Question

我在主窗口的 video 元素中播放视频。我想在使用 JavaScript open() 的窗口中的 cavas 中显示视频。 (原始的 video 元素将被隐藏，但它仍将负责播放声音。)

我是这样做的。

<video id='video' style='display: none;' autoplay>
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
  <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
  <source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>

我打开一个新窗口并创建一个 canvas 元素。然后我在主窗口中为视频的每个 timeupdate 事件添加一个回调。运行时，我将当前视频帧复制到 Canvas 。

video.addEventListener("play", function() {
  var child = open("/echo/html/", "width=" + video.videoWidth + ",height=" + video.videoHeight);

  child.addEventListener("load", function() {
    var canvas = child.document.createElement("canvas"),
        g2d = canvas.getContext("2d");

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    child.document.body.appendChild(canvas);

    video.addEventListener("timeupdate", function() {
      g2d.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    });
  });
});

你可以看到这个工作 here on jsfiddle但它运行不顺利。似乎每次帧更改时都不会调用 timeupdate 的函数。它很少被调用。

如何在外部窗口中以完整质量显示视频？

Answer 1

timeupdate() 是为显示视频运行时间而设计的，实际上可能不会在每一帧都运行。

要拥有流畅的动画循环，请在消费者端使用 requestAnimationFrame() 循环对其进行动画处理

• > https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame

对于每个 requestAnimationFrame 调用，拉取新的视频帧。