HTML5逐帧查看/逐帧搜索？

Question

我正在寻找一种查看 HTML5 的方法 <video> , 逐帧。

场景:有一个视频，有一个额外的按钮，按下时会跳到下一帧。

您认为最好的方法是什么？

1. 正常播放视频，Listen to timeUpdate event, which on FireFox is called for every frame ，然后暂停视频。但是，其他浏览器的行为与 Firefox 不同。
2. 更改 currentTime元素手动调整为 +1/24 秒，其中“24”是帧速率。但是，我不知道如何获取 FPS。
3. 您能想到的任何其他有用的方法。

---

编辑

我找到了 this very useful HTML5 test page ，它跟踪所有浏览器实现准确帧搜索的能力。

Answer 1

似乎大多数浏览器都允许第二种方法，尽管您需要知道帧速率。然而，Opera 是个异常(exception)，它需要一种类似于您的第一个方法的方法(结果并不完美)。这是一个 demo page I came up with使用 29.97 帧/秒的视频(美国电视标准)。请注意，它尚未经过广泛测试，因此它可能无法在 IE 9、Firefox 4 或任何浏览器的 future 版本中运行。

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);
};