requestVideoFrameCallback()
requestVideoFrameCallback() は HTMLVideoElement インターフェイスのメソッドで、新しい映像フレームが合成エンジンに送信された際に実行されるコールバック関数を登録します。これにより、開発者は各映像フレームに対して効率的な操作を行うことができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 83 | 83 | 132 | 15.4 | 83 | 15.4 | |
| DOM API | ||||||
| cancelVideoFrameCallback() は HTMLVideoElement インターフェイスのメソッドで、以前登録された映像フレームコールバックを取り消します。 | 83 | 83 | 132 | 15.4 | 83 | 15.4 |
基本構文
JAVASCRIPT
const video = document.querySelector('video');
function onFrame(now, metadata) {
console.log('Frame time:', metadata.mediaTime);
video.requestVideoFrameCallback(onFrame);
}
video.requestVideoFrameCallback(onFrame);ライブデモ
Frame callback counter
Drive a video from a canvas stream and count rendered frames with requestVideoFrameCallback.
プレビュー全画面表示
Frame metadata
Read mediaTime and presented frame counts from the callback metadata object.
プレビュー全画面表示
Playback note
Pair the callback with a short explanation of why it is useful for sync work.
プレビュー全画面表示
実務での使いどころ
-
requestVideoFrameCallback() の活用
requestVideoFrameCallback() は HTMLVideoElement インターフェイスのメソッドで、新しい映像フレームが合成エンジンに送信された際に実行されるコールバック関数を登録します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。