Question

我需要搜索一些特殊功能/模式，这些功能/模式可能只在一个（或两个）许多帧中可见。帧速率可以低至每秒25帧，并且视频可以包含超过7500帧。我经常开始高速扫描视频，寻找可能找到该功能的片段，然后倒带。我重复这个过程，同时逐渐降低播放速度，直到我找到一个相当小的时间窗口，我可以期待找到该功能（如果它存在）。然后，我想使用键击事件（例如右箭头键和左箭头键）通过单帧向前和向后前进，以找到感兴趣的特征。我已经设法使用HTML5和JavaScript来控制前进速度;但是，仍然不知道如何使用键盘单帧前进和后退通过视频。如何实现这一目标？请注意，我的网络浏览器是在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);
        }
    }        
});

您需要注意的几件事情虽然不会给您带来太多麻烦：

无法检测帧速率，因此您必须对其进行硬编码或在某些查找表中列出或猜测。
寻求可能需要几毫秒或更长时间并且不会同步发生。浏览器需要一些时间从网络加载视频（如果尚未加载）并解码帧。如果您需要知道何时完成搜索，您可以倾听“寻找”事件。

Answer 2

您可以通过检查

来检查视频是否已前进到下一帧

        targetTime += (1 / 25) // 25 fps
        video.currentTime = targetTime // set the video frame
        
        if (video.currentTime >= video.duration) { // if it's the end of the video
            alert('done!');
        }

        if (video.currentTime == targetTime) { // frame has been updated
            
        }

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

2 个答案: