javascript - HTML5 中的同步视频采样

Question

我正在尝试对 HTML5 中的视频进行采样。

接下来是问题：video.currentTime在循环中设置 while 执行太快而无法捕获帧，因为帧更新相对较慢。我通过为每个采样设置 150 毫秒的间隔来解决这个问题。

有没有办法创建一个循环来无间隔地对其进行采样？（我现在正在对高清视频进行采样，对于较小的视频，150 毫秒的速率可能会过慢）

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.
    });
});