1

我video在主窗口的一个元素中播放了一段视频。我想用 JavaScriptcavas在一个窗口中显示视频。open()（原始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然后我在主窗口中为视频的每个事件添加一个回调。当它运行时，我将当前的视频帧复制到画布上。

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);
    });
  });
});

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

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

4

1 回答 1

2

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

要获得平滑的动画循环，requestAnimationFrame()请在消费者端使用循环对其进行动画处理

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

于 2012-08-21T08:21:27.457 回答