HTML5逐帧查看/寻找帧？ [英] HTML5 frame-by-frame viewing / frame-seeking?

问题描述

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

I'm looking for a way to view HTML5 <video>, frame-by-frame.

场景：有一个视频，有一个按钮可以在按下时跳到下一帧。

The scenario: Having a video, with an additional button that skips to the next frame when pressed.

您认为最好的方法是做什么？ / p>

What do you think is the best method to do this?

1. 正常播放视频，收听FireFox上的 eventUpdate 事件每一帧，然后暂停视频。但是，其他浏览器的行为不像Firefox。


2. 手动更改 currentTime 元素为+1/24秒，其中24是帧速率。不过，我不知道如何获得FPS。


3. 您可以想到的任何其他有用的方式。

1. Play the video normally, Listen to timeUpdate event, which on FireFox is called for every frame, and then just pause the video. However, the other browsers don't behave like Firefox.
2. Change the currentTime element manually to +1/24 of a second, where "24" is the frame rate. I have no idea how to aquire the FPS, however.
3. Any other helpful way you can think of.

---

编辑

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

---

EDIT

I have found this very useful HTML5 test page, which tracks all browsers' ability to achieve accurate frame-seeking.

推荐答案

似乎大多数浏览器都允许使用第二种方法，但您需要知道帧速率。然而，歌剧是个例外，并且需要一种类似于第一种的方法（结果并不完美）。这是我使用29.97帧/秒视频（美国电视标准）制作的演示页面。请注意，它尚未经过广泛的测试，因此它可能无法在IE 9，Firefox 4或任何浏览器的未来版本中使用。

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 with that 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.

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） p>

JavaScript (run on page load and uses jQuery 1.4.4 for the sake of brevity):

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

这篇关于HTML5逐帧查看/寻找帧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！