如何在视频播放中前进一帧和后退一帧？答案

【问题标题】：How to step one frame forward and one frame backward in video playback?如何在视频播放中前进一帧和后退一帧？
【发布时间】：2013-12-02 20:13:31
【问题描述】：

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

【问题讨论】：

标签： html5-video

【解决方案1】：

您可以通过设置 currentTime 属性来寻找视频中的任何时间。像这样的：

var video = document.getElementById('video'), 帧时间 = 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);
        }
    }        
});

您需要注意几件事，尽管它们不会给您带来太多麻烦：

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

【讨论】：

您的解决方案效果很好；但是，现在还有另一个问题。我很确定我的测试视频是 25 fps（如您的代码所示），并且我知道该视频的总时间约为 25 秒。当我将鼠标移到视频显示区域时，进度条显示 0 到 0.25 --- 如何显示总时间是 25 秒而不是 0.25 秒？
这很奇怪。我得看看。你能链接到屏幕截图吗？
可以从 AVI 视频中提取帧之间的时间，然后可以用来确定每秒的帧数。我已经发布了这个link
关于 2. 如果您需要平滑逐帧搜索，请在 blob 中预加载带有 xhr 的电影，并使用 blob 设置源。注意：Safari 对此有问题，但您可以对其进行 base64 编码并将其设置为那里的源。
啊！我正在尝试显式单步帧以查看 currentTime 以便我可以 推断 fps !!!

【解决方案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
            
        }

【讨论】：