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

質問

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

シナリオ: 押すと次のフレームにスキップする追加のボタンを持つ、動画があります。

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

1. 普通に動画を再生する。 を聴く timeUpdate イベント (FireFox ではフレームごとに呼び出される) を聞く。 を呼び出し、ビデオを一時停止するだけです。しかし、他のブラウザは Firefox のような動作はしません。
2. を変更します。 currentTime 要素を手動で +1/24 秒に変更し、ここで "24" はフレーム レートです。ただし、FPSを取得する方法については、まったくわかりません。
3. その他、思いつく限りの役に立つ方法。

編集

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

どのように解決するのですか?

フレーム レートを知る必要がありますが、ほとんどのブラウザーは 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);
};