requestVideoFrameCallback()
The requestVideoFrameCallback() method of the HTMLVideoElement interface registers a callback function that runs when a new video frame is sent to the compositor. This enables developers to perform efficient operations on each video frame.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 83 | 83 | 132 | 15.4 | 83 | 15.4 | |
| DOM API | ||||||
| The cancelVideoFrameCallback() method of the HTMLVideoElement interface cancels a previously-registered video frame callback. | 83 | 83 | 132 | 15.4 | 83 | 15.4 |
Syntax
const video = document.querySelector('video');
function onFrame(now, metadata) {
console.log('Frame time:', metadata.mediaTime);
video.requestVideoFrameCallback(onFrame);
}
video.requestVideoFrameCallback(onFrame);Live demo
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.
Use cases
-
Enhance media playback
Use requestVideoFrameCallback() when audio, video, or responsive media needs better control or more capable browser behavior.
-
Deliver flexible assets
Apply requestVideoFrameCallback() to adapt media loading or presentation more closely to user context and device capability.
Cautions
- Test requestVideoFrameCallback() in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.