requestVideoFrameCallback()

概要

HTMLVideoElement.requestVideoFrameCallback() は動画の新しいフレームが描画されるたびにコールバックを実行し、精密なフレーム同期処理を実現します。

対応ブラウザ

基本構文

const video = document.querySelector('video');
function onFrame(now, metadata) {
  console.log('フレーム時刻:', metadata.mediaTime);
  video.requestVideoFrameCallback(onFrame);
}
video.requestVideoFrameCallback(onFrame);

実務での使いどころ

• requestVideoFrameCallback() の活用

  requestVideoFrameCallback。動画フレームごとのコールバックAPI。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — requestVideoFrameCallback()