如何在视频播放中前进一帧，后退一帧

Question

我需要搜索一些特殊的功能/模式，这些功能/模式可能只在许多帧中的一个（或两个）帧中可见。帧速率可以慢到每秒25帧，并且视频可以包含超过7500帧。我经常从高速扫描视频开始，寻找可能找到该功能的片段，然后倒带。我重复这个过程，同时逐渐降低播放速度，直到我找到一个相当小的时间窗口，我可以在其中找到功能（如果存在）。然后，我想使用键点击事件（例如，右箭头和左箭头键）通过单帧向前和向后移动来找到感兴趣的功能。我已经设法使用HTML5和JavaScript来控制前进速度；但是，仍然不知道如何使用键盘进行单帧前后步进的视频。如何才能做到这一点？注意，我的网络浏览器是运行在Windows7平台上的Firefox 26。

Answer 1

您可以通过设置currentTime属性来查找视频中的任何时间。类似这样的东西：

var video = document.getElementById('video'),
    frameTime = 1 / 25; //assume 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. 查找可能需要几毫秒或更长时间，并且不会同步进行。浏览器需要一些时间从网络加载视频（如果尚未加载）并解码帧。如果你需要知道搜索何时完成，你可以收听"搜索"事件。

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
            
        }