TrackEvent

The TrackEvent interface of the HTML DOM API is used for events which represent changes to a set of available tracks on an HTML media element; these events are addtrack and removetrack.

It's important not to confuse TrackEvent with the RTCTrackEvent interface, which is used for tracks which are part of an RTCPeerConnection.

Events based on TrackEvent are always sent to one of the media track list types:

Event TrackEvent

Constructor

TrackEvent()

Creates and initializes a new TrackEvent object with the event type specified, as well as optional additional properties.

Instance properties

TrackEvent is based on Event, so properties of Event are also available on TrackEvent objects.

track Read only

The DOM track object the event is in reference to. If not null, this is always an object of one of the media track types: AudioTrack, VideoTrack, or TextTrack).

Instance methods

TrackEvent has no methods of its own; however, it is based on Event, so it provides the methods available on Event objects.

Example

This example sets up a function, handleTrackEvent(), which is called for any addtrack or removetrack event on the first <video> element found in the document.

js
const videoElem = document.querySelector("video");

videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("removetrack", handleTrackEvent, false);

function handleTrackEvent(event) {
  let trackKind;

  if (event.target instanceof VideoTrackList) {
    trackKind = "video";
  } else if (event.target instanceof AudioTrackList) {
    trackKind = "audio";
  } else if (event.target instanceof TextTrackList) {
    trackKind = "text";
  } else {
    trackKind = "unknown";
  }

  switch (event.type) {
    case "addtrack":
      console.log(`Added a ${trackKind} track`);
      break;
    case "removetrack":
      console.log(`Removed a ${trackKind} track`);
      break;
  }
}

The event handler uses the JavaScript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the element.

Specifications

Specification
HTML
# the-trackevent-interface

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
TrackEvent
TrackEvent() constructor
track

Legend

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

Full support
Full support