HTML5中的同步视频采样

Question

我正在尝试以HTML5格式化视频。

问题是下一个： 在循环中设置video.currentTime对于捕获帧执行得太快，因为帧更新相对较慢。我通过为每次采样设置150ms的间隔来解决这个问题。

有没有办法在没有间隔的情况下创建一个循环来对其进行采样？ （我现在正在对高清视频进行采样，对于较小的视频，150ms的速率可能会不必要地慢）

Answer 1

尝试为seeked事件添加事件侦听器，以了解视频何时更改位置。我还建议使用requestAnimationFrame而不是setTimeout，因为这样可以确保所有读取事件都与视频帧更新同步。

videoElement.addEventListener('seeked', function() {
    console.log('current time has successfully been changed.');
    requestAnimationFrame(function() {
        // new frame to sample *should* now be available
        // you could test by comparing videoElement.currentTime against
        // last time you sampled.
    });
});