HTML5逐帧查看/寻帧？

我正在寻找一种方式来逐帧查看HTML5< video>。

场景：有一个视频，带有一个额外的按钮，当按下时跳到下一帧。

你认为这是最好的方法是什么？

>正常播放视频，收听timeUpdate事件，在每个帧调用FireFox，然后只需暂停视频。但是，其他浏览器的行为不像Firefox。
>手动将currentTime元素更改为1/24秒，其中“24”是帧速率。我不知道如何获得FPS，但是。
>任何其他有用的方式，你可以想。

编辑

我发现this very useful HTML5 test page，它跟踪所有浏览器的能力，以实现准确的寻帧。

解决方法

看起来大多数浏览器允许第二种方法，虽然你需要知道帧速率。 Opera，然而，是例外，并需要一个类似于你的第一个方法(结果不完美)。这里是一个 demo page I came up with，使用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);
};