HTML5逐帧查看/逐帧搜索？

Question

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

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

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

1. 正常播放视频， 收听 timeUpdate 事件，在 FireFox 上为每一帧调用该事件， 然后暂停视频。但是，其他浏览器的行为与 Firefox 不同。
2. 将 currentTime 元素手动更改为 +¹⁄₂₄ 秒，其中“24”是帧速率。但是，我不知道如何获取 FPS。
3. 您能想到的任何其他有用的方法。

---

编辑

我发现 这个非常有用的 HTML5 测试页面，它跟踪所有浏览器实现精确帧搜索的能力。

原文由 Ory Band 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

似乎大多数浏览器都允许第二种方法，尽管您需要知道帧速率。然而，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);
};

原文由 PleaseStand 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

刚刚解决了这个非常相同的问题，我想出了一种蛮力方法来找到帧速率。知道帧速率永远不会超过每秒 60 帧，我以 ¹⁄₆₀ 秒的步长搜索视频。通过将视频放在画布元素上然后使用 getImageData 获取像素数据，将每一帧与最后一帧进行比较。我在一秒钟的视频中执行此操作，然后计算唯一帧的总数以获得帧速率。

您不必检查每个像素。我抓住视频内部的大约 2/3，然后检查大约每 8 个像素（取决于大小）。您可以仅用一个不同的像素停止比较，因此这种方法相当快速且可靠，虽然不能与读取 frameRate 属性相比，但比猜测更好。

原文由 Blindman67 发布，翻译遵循 CC BY-SA 3.0 许可协议