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

问题描述

我正在寻找一种逐帧查看 HTML5 的方法.

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.

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

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

1. 正常播放视频，监听 timeUpdate 事件，在 FireFox 上每帧都会调用该事件a>，然后暂停视频.但是，其他浏览器的行为与 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.

推荐答案

虽然您需要知道帧速率，但似乎大多数浏览器都允许第二种方法.然而，Opera 是个例外，它需要一种类似于您的第一种方法(结果并不完美).这是一个 我想出的演示页面，它使用了 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):

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屋！