如何在视频播放中前进一帧前进一帧？

Question

我需要搜索一些特殊功能/模式,这些功能/模式可能只在一帧(或两帧)中可见.帧速率可以低至每秒25帧,并且视频可以包含超过7500帧.我经常开始高速扫描视频,寻找可能找到该功能的片段,然后回放.我重复这个过程,同时逐渐降低播放速度,直到我找到一个相当小的时间窗口,我可以期待找到该功能(如果它存在).然后,我想使用关键命中事件(例如右箭头和左箭头键)通过单帧向前和向后前进,以找到感兴趣的特征.我已经设法使用HTML5和JavaScript来控制前进速度; 但是,仍然不知道如何使用键盘单帧前进和后退通过视频.如何实现这一目标？请注意,我的Web浏览器是在Windows 7平台上运行的Firefox 26.

Answer 1

您可以通过设置currentTime属性来搜索视频中的任何时间.像这样的东西:

var video = document.getElementById('video'),frameTime = 1/25; //假设25 fps

window.addEventListener('keypress', function (evt) {
    if (video.paused) { //or you can force it to pause here
        if (evt.keyCode === 37) { //left arrow
            //one frame back
            video.currentTime = Math.max(0, video.currentTime - frameTime);
        } else if (evt.keyCode === 39) { //right arrow
            //one frame forward
            //Don't go past the end, otherwise you may get an error
            video.currentTime = Math.min(video.duration, video.currentTime + frameTime);
        }
    }        
});

只需要注意几件事情,尽管它们不会给你带来太多麻烦:

1. 无法检测帧速率,因此您必须对其进行硬编码或将其列在某个查找表中或猜测.

2. 寻求可能需要几毫秒或更长时间并且不会同步发生.浏览器需要一些时间从网络加载视频(如果尚未加载)并解码帧.如果您需要知道何时完成搜索,您可以倾听"寻找"事件.