Html HTML5 逐帧查看/寻帧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4298084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 frame-by-frame viewing / frame-seeking?
提问by Ory Band
I'm looking for a way to view HTML5 <video>, frame-by-frame.
我正在寻找一种<video>逐帧查看 HTML5 的方法。
The scenario: Having a video, with an additional button that skips to the next frame when pressed.
场景：有一个视频，有一个附加按钮，按下时跳到下一帧。
What do you think is the best method to do this?
你认为最好的方法是什么？
- Play the video normally, Listen to
timeUpdateevent, which on FireFox is called for every frame, and then just pause the video. However, the other browsers don't behave like Firefox. - Change the
currentTimeelement manually to +1/24 of a second, where "24" is the frame rate. I have no idea how to aquire the FPS, however. - Any other helpful way you can think of.
- 正常播放视频，侦听
timeUpdate事件，在 FireFox 上为每一帧调用该事件，然后暂停视频。但是，其他浏览器的行为与 Firefox 不同。 currentTime手动将元素更改为 +1/24 秒，其中“24”是帧速率。但是，我不知道如何获得 FPS。- 您能想到的任何其他有用的方法。
EDIT
编辑
I have found this very useful HTML5 test page, which tracks all browsers' ability to achieve accurate frame-seeking.
我发现了这个非常有用的 HTML5 测试页面，它可以跟踪所有浏览器实现精确寻帧的能力。
采纳答案by PleaseStand
It seems that most browsers allow the second approach, although you would need to know the frame rate. Opera, however, is the exception, and requires an approach similar to your first one (the result is not perfect). Here's a demo page I came up withthat uses a 29.97 frames/s video (U.S. television standard). Note that it has not been extensively tested, so it might not work in IE 9, Firefox 4, or future versions of any browser.
似乎大多数浏览器都允许第二种方法，尽管您需要知道帧速率。然而，Opera 是个例外，它需要一种类似于您的第一种方法（结果并不完美）。这是我想出的使用 29.97 帧/秒视频（美国电视标准）的演示页面。请注意，它尚未经过广泛测试，因此它可能无法在 IE 9、Firefox 4 或任何浏览器的未来版本中运行。
HTML:
HTML：
<p id="time"></p>
<video id="v0" controls tabindex="0" autobuffer preload>
<source type="video/webm; codecs="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
JavaScript (run on page load and uses jQuery 1.4.4 for the sake of brevity):
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);
};
回答by Blindman67
Having just been fighting this very same problem I cam up with a brute force method to find the frame rate.Knowing that the frame rate will never pass 60 frames a second I seek through the video at 1/60th second steps. Comparing each frame to the last by putting the video onto a canvas element and then using getImageData to get pixel data. I do this over a second of video and then count up the total number of unique frames to get the frame rate.
刚刚解决了同样的问题，我想出了一种蛮力方法来找到帧速率。知道帧速率永远不会超过每秒 60 帧，我以 1/60 秒的步长搜索视频。通过将视频放到画布元素上，然后使用 getImageData 获取像素数据，将每一帧与最后一帧进行比较。我在一秒钟的视频中执行此操作，然后计算唯一帧的总数以获得帧速率。
You do not have to check every single pixel. I Grab about 2/3rds of the inside of the video and then check about every 8th pixel across and down (depending on the size). You can stop the compare with just a single pixel different so this method in reasonably fast and reliable, well not compared to say reading a frameRate property, but better than guessing.
您不必检查每个像素。我抓住视频内部的大约 2/3，然后检查大约每 8 个像素的横向和向下（取决于大小）。您可以仅使用不同的单个像素停止比较，因此此方法相当快速且可靠，与读取 frameRate 属性相比，但比猜测更好。
回答by Nathan MacInnes
The best thing you can probably do until standards are confirmed and implemented (that'll be ages!) is take a guess at the frame-rate and increment by that time. Unless you're in a controlled environment, I'd advise against relying heavily on HTML5... as much as I love its features, it won't be reliably supported.
在标准得到确认和实施之前（这将是很长的一段时间！），您可能可以做的最好的事情是猜测帧速率并在那时增加。除非您处于受控环境中，否则我建议不要过度依赖 HTML5……尽管我喜欢它的功能，但它不会得到可靠的支持。
