代码之家 › 专栏 › 技术社区 › Ory Band

HTML5逐帧查看/逐帧查找?

html5-video video html5 html

Ory Band · 技术社区 · 15 年前

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

场景:有一个视频,有一个额外的按钮,当按下时跳到下一帧。

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

正常播放视频, Listen to timeUpdate event, which on FireFox is called for every frame ,然后暂停视频。但是,其他浏览器的行为与Firefox不同。
改变 currentTime 元素手动到+1/24秒,其中“24”是帧速率。但是,我不知道如何获取FPS。
你能想到的任何其他有用的方法。

编辑

我找到了 this very useful HTML5 test page 它跟踪所有浏览器实现精确帧搜索的能力。

3 回复 | 直到 7 年前

PleaseStand 15 年前

似乎大多数浏览器都允许使用第二种方法,尽管您需要知道帧速率。然而,Opera是个例外,它需要一种与第一种方法类似的方法(结果并不完美)。这里有一个 demo page I came up with 使用29.97帧/秒视频(美国电视标准)。请注意,它还没有经过广泛的测试,因此可能无法在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);
};

Blindman67 11 年前

刚解决了这个问题,我就用一种强力的方法找到了帧速率。我知道帧速率永远不会超过每秒60帧,所以我用1/60秒的速度搜索视频。通过将视频放到画布元素上,然后使用getImageData获取像素数据,将每个帧与最后一帧进行比较。我在视频的一秒钟内完成此操作,然后计算唯一帧的总数以获得帧速率。

您不必检查每个像素。我抓取大约2/3的视频内部,然后检查大约每8个像素的横过和向下(取决于大小)。你可以停止比较,只需一个不同的像素,这样的方法在相当快速和可靠,很好地说不比读一个帧速率属性,但优于猜测。

Nathan MacInnes 15 年前

在标准得到确认和实施之前,你能做的最好的事情(那将是一个时代!)是对帧速率进行猜测,并按该时间递增。除非你处于受控环境中,否则我建议你不要过分依赖HTML5…尽管我很喜欢它的功能,但它不会得到可靠的支持。