web-dev-qa-db-ja.com

HTML5のフレーム単位の表示/フレームシーク？

HTML5を表示する方法を探しています<video>、フレームごと。

シナリオ：ビデオがあり、押されたときに次のフレームにスキップする追加のボタンがあります。

これを行う最良の方法は何だと思いますか？

  1. 通常どおりビデオを再生します timeUpdateイベントを聴きます。FireFoxではフレームごとに呼び出されます 。その後、ビデオを一時停止します。ただし、他のブラウザはFirefoxのようには動作しません。
  2. currentTime要素を手動で+1/24秒に変更します。「24」はフレームレートです。ただし、FPSを取得する方法はわかりません。
  3. あなたが考えることができる他の有用な方法。

編集

この非常に便利なHTML5テストページ を見つけました。これは、すべてのブラウザーの正確なフレームシークを達成する能力を追跡します。

htmlhtml5videohtml5-video
50
Ory Band

フレームレートを知る必要がある場合でも、ほとんどのブラウザは2番目のアプローチを許可しているようです。ただし、Operaは例外であり、最初の方法と同様の方法が必要です（結果は完全ではありません）。 私が思いついたデモページ は、29.97フレーム/秒のビデオ（米国のテレビ規格）を使用しています。十分にテストされていないため、IE 9、Firefox 4、またはブラウザの将来のバージョンでは動作しない可能性があります。

HTML：

<p id="time"></p>
<video id="v0" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

JavaScript（ページの読み込み時に実行し、簡潔にするためjQuery 1.4.4を使用）：

var vid = $('#v0')[0];

vid.onplay = vid.onclick = function() {
    vid.onplay = vid.onclick = null;

    setTimeout(function() {
        vid.pause();
        setInterval(function() {
            if($.browser.opera) {
                var oldHandler = vid.onplay;
                vid.onplay = function() {
                    vid.pause();
                    vid.onplay = oldHandler;
                };
                vid.play();
            } else {
                vid.currentTime += (1 / 29.97);
            }
        }, 2000);
    }, 12000);

    setInterval(function() {
        $('#time').html((vid.currentTime * 29.97).toPrecision(5));
    }, 100);
};
28
PleaseStand

このまったく同じ問題と戦っていたので、フレームレートを見つけるためにブルートフォースメソッドを使用しました。ビデオをキャンバス要素に配置し、getImageDataを使用してピクセルデータを取得することにより、各フレームを最後と比較します。ビデオの1秒間でこれを行い、フレームレートを取得するために一意のフレームの総数をカウントアップします。

すべてのピクセルをチェックする必要はありません。ビデオの内側の約3分の2をつかんで、8ピクセルごとに上下に確認します（サイズによって異なります）。単一の異なるピクセルで比較を停止することができるため、このメソッドは合理的に高速で信頼性が高く、frameRateプロパティの読み取りと比較するのではなく、推測するよりも優れています。

8
Blindman67

標準が確認され、実装されるまで（おそらく古くなるでしょう！）おそらくあなたができる最善のことは、フレームレートを推測し、その時間までに増分することです。制御された環境にいる場合を除き、HTML5に大​​きく依存しないことをお勧めします。その機能が気に入っている限り、HTML5は確実にサポートされません。

1
Nathan MacInnes