HTML5フレームによるフレームにインフレームを求めて?

StackOverflow https://stackoverflow.com/questions/4298084

  •  28-09-2019
  •  | 
  •  

質問

を探していなければならないというニーズビュー HTML5 <video>, フレームによるフレーム。

シナリオ:このビデオでは、追加ボタンをスキップのフレームが押していただきます。

何だとお考えで最良の方法だ。

  1. ビデオの再生が正常に 聞く timeUpdate イベントは、FireFoxといいフレーム毎に, しかを一時停止します。しかし、他のブラウザなるようにしています。
  2. の変更 currentTime 要素を手作業+1/24の第二は、"24"は、フレームレートが得られます。わたしにはわかりませんか詞のFPSしています。
  3. その他のもうまいことだと思います。

編集

見 この非常に有HTML5のテストページ, は、トラックすべてのブラウザ機能を正確なフレームでいます。

役に立ちましたか？

解決

ほとんどのブラウザは2番目のアプローチを許可しているようですが、フレームレートを知る必要があります。ただし、オペラは例外であり、最初のオペラと同様のアプローチが必要です（結果は完璧ではありません）。これが次のとおりです 私が思いついたデモページ 29.97フレーム/sビデオ（米国のテレビスタンダード）を使用しています。それは広範囲にテストされていないため、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);
};

他のヒント

このまったく同じ問題と戦っているだけで、フレームレートを見つけるためにブルートフォースの方法でカムアップします。フレームレートが1/60秒の秒でビデオを探して60フレームを通過することはないことを知っています。ビデオをキャンバス要素に配置し、getImagedAtaを使用してピクセルデータを取得することにより、各フレームを最後に比較します。私はこれを1秒間のビデオで行い、その後、一意のフレームの総数をカウントしてフレームレートを取得します。

すべてのピクセルをチェックする必要はありません。ビデオの内側の約2/3をつかんでから、約8ピクセルごとに約8番目のピクセルごとに確認します（サイズに応じて）。単一のピクセルの異なるものと比較することができますので、この方法は合理的に高速で信頼性が高く、フレームレートプロパティを読むとは比べていませんが、推測よりも優れています。

のレストランのお食事できるのではないでしょうかいまでの基準の確認を実施とする。) あかねのフレームレートを増加させています。ませんが制御された環境ンドに対し依存HTML5...どんが、特徴となりますが確実に対応します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top