VideoTrackList: change event

Limited availability

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

Want more browser support for this feature? Tell us why.

See full compatibility
Learn more

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 addEventListener():

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

Alternatively, assign to the event handler property of the interface:

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 (but note that this replaces other event listeners added using onchange, if any):

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;
});