javascript - HTML5 での同期ビデオ サンプリング

Question

HTML5 でビデオをサンプリングしようとしています。

問題は次のとおりvideo.currentTimeです。フレームの更新が比較的遅いため、ループ内での設定はフレームをキャプチャするには速すぎます。サンプリングごとに150msの間隔を設定することで、この問題を克服しました。

間隔なしでサンプリングするループを作成する方法はありますか? (私は現在 HD ビデオをサンプリングしていますが、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.
    });
});