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

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cancelVideoFrameCallback
Chrome – Full support
Chrome 83 (Release date: 2020-05-19)
footnote Full support
Edge – Full support
Edge 83 (Release date: 2020-05-21)
footnote Full support
Firefox – Full support
Firefox 132 (Release date: 2024-10-29)
footnote
footnote See bug 1800882
Opera – Full support
Opera 69 (Release date: 2020-06-24)
footnote Full support
Safari – Full support
Safari 15.4 (Release date: 2022-03-14)
footnote Full support
Chrome Android – Full support
Chrome Android 83 (Release date: 2020-05-19)
footnote Full support
Firefox for Android – Full support
Firefox for Android 132 (Release date: 2024-10-29)
footnote
footnote See bug 1800882
Opera Android – Full support
Opera Android 59 (Release date: 2020-06-30)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15.4 (Release date: 2022-03-14)
footnote Full support
Samsung Internet – Full support
Samsung Internet 13 (Release date: 2020-12-02)
footnote Full support
WebView Android – Full support
WebView Android 83 (Release date: 2020-05-19)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15.4 (Release date: 2022-03-14)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

See also