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 に答える