Newly availableUseful in modern browsers, but confirm support before making it a core requirement.
Media Newly available

requestVideoFrameCallback()

The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Media

Overview

The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLVideoElement.cancelVideoFrameCallback
83
83
132
15.4
83
15.4
DOM API
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.
83
83
132
15.4
83
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
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.

PreviewFullscreen

Frame metadata

Read mediaTime and presented frame counts from the callback metadata object.

PreviewFullscreen

Playback note

Pair the callback with a short explanation of why it is useful for sync work.

PreviewFullscreen

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.

Related links

Powered by web-features