HTML5逐帧查看/寻找框架?

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

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

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

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

编辑

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

似乎大多数浏览器都允许使用第二种方法,但是您需要知道帧速率。 然而,歌剧是个例外,并且需要类似于第一个的方法(结果并不完美)。 这里是我提出的一个演示页面 ,使用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); }; 

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

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

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