HTML5逐帧查看/寻找框架？

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

场景：有一个video，一个额外的button，按下时跳到下一帧。

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

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

---

编辑

我发现这个非常有用的HTML5testing页面 ，可以跟踪所有浏览器实现精确寻帧的能力。

Answer 1

似乎大多数浏览器都允许使用第二种方法，但是您需要知道帧速率。 然而，歌剧是个例外，并且需要类似于第一个的方法（结果并不完美）。 这里是我提出的一个演示页面 ，使用29.97帧/秒的video（美国电视标准）。 请注意，它没有经过广泛的testing，所以它可能不适用于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); }; 

Answer 2

刚刚对付这个问题，我用一个蛮力的方法来找出帧速率。知道帧速率将永远不会超过60帧，我在1/60秒的步骤通过video寻找。 通过将video放到canvas元素上，然后使用getImageData获取像素数据，将每一帧与最后一帧进行比较。 我通过一秒钟的video做这个，然后计算唯一帧的总数来得到帧速率。

你不必检查每一个像素。 我抓住video内的2/3左右，然后检查大约每隔8个像素（取决于大小）。 你可以停止比较只有一个像素不同，所以这个方法在合理的快速和可靠的，以及没有比较说读取frameRate属性，但比猜测更好。

Answer 3

在标准得到确认和实施之前，你可能会做的最好的事情是（这将是年龄！）是猜测帧率，并在那个时候增加。 除非您处于受控环境中，否则我build议不要严重依赖HTML5 ……就像我喜欢它的function一样，它不会得到可靠的支持。