HTMLVideoElement: cancelVideoFrameCallback() method

Baseline 2024
Newly available

Since ⁨October 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The cancelVideoFrameCallback() method of the HTMLVideoElement interface cancels a previously-registered video frame callback.

Syntax

js
cancelVideoFrameCallback(id)

Parameters

id

A number representing the ID of the video frame callback you want to cancel. This will be the value returned by the corresponding HTMLVideoElement.requestVideoFrameCallback call.

Return value

None (undefined).

Examples

Canceling a video frame callback

This example shows how to use cancelVideoFrameCallback() to cancel a previously-registered video frame callback.

js
let videoCallbackId = null;

function updateCanvas(now, metadata) {
  // Do something with the frame

  // …

  // Re-register the callback to run on the next frame
  // It's important to update the videoCallbackId on each iteration
  // so you can cancel the callback successfully
  videoCallbackId = video.requestVideoFrameCallback(updateCanvas);
}

// Initial registration of the callback to run on the first frame
videoCallbackId = video.requestVideoFrameCallback(updateCanvas);

// …

// Cancel video frame callback using the latest videoCallbackId
if (videoCallbackId !== null) {
  video.cancelVideoFrameCallback(videoCallbackId);
}

Specifications

Specification
HTMLVideoElement.requestVideoFrameCallback()
# dom-htmlvideoelement-cancelvideoframecallback

Browser compatibility

See also