VideoTrackList: change event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

The change event is fired when a video track is made active or inactive, for example by changing the track's selected property.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("change", (event) => { })

onchange = (event) => { }

Event type

A generic Event with no added properties.

Examples

Using addEventListener():

const videoElement = document.querySelector("video");
videoElement.videoTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' event fired`);
});

// changing the value of `selected` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});

Using the onchange event handler property:

const videoElement = document.querySelector("video");
videoElement.videoTracks.onchange = (event) => {
  console.log(`'${event.type}' event fired`);
};

// changing the value of `selected` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});

Specifications

Specification
HTML # event-media-change
HTML # handler-tracklist-onchange

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
`change` event	Chrome – No support Chrome 37 (Release date: 2014-08-26) disabled disabled From version 37 users must explicitly set the `enable-experimental-web-platform-features` preference to `enabled`. To change preferences in Chrome, visit chrome://flags.	Edge – No support Edge 12 – 18 (Release date: 2015-07-29) unknown Support unknown Edge – No support Edge 79 (Release date: 2020-01-15) disabled disabled From version 79 users must explicitly set the `enable-experimental-web-platform-features` preference to `enabled`. To change preferences in Edge, visit about:flags.	Firefox – No support Firefox 33 (Release date: 2014-10-14) disabled disabled From version 33 users must explicitly set the `media.track.enabled` preference to `true`. To change preferences in Firefox, visit about:config.	Opera – No support Opera 24 (Release date: 2014-09-02) disabled disabled From version 24 users must explicitly set the `enable-experimental-web-platform-features` preference to `enabled`. To change preferences in Opera, visit opera://flags.	Safari – Full support Safari 7 (Release date: 2013-10-22) footnote Full support	Chrome Android – No support Chrome Android 37 (Release date: 2014-09-03) disabled disabled From version 37 users must explicitly set the `enable-experimental-web-platform-features` preference to `enabled`. To change preferences in Chrome Android, visit chrome://flags.	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android footnote No support	Safari on iOS – Full support Safari on iOS 7 (Release date: 2013-09-18) footnote Full support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – Full support WebView on iOS 7 (Release date: 2013-09-18) footnote Full support

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

Full support: Full support
No support: No support
: User must explicitly enable this feature.
: Has more compatibility info.