The TrackEvent
interface, which is part of the HTML DOM specification, 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:
VideoTrackList
found inHTMLMediaElement.videoTracks
Events involving video tracks are always sent to the - Events involving audio tracks are always sent to the
AudioTrackList
specified inHTMLMediaElement.audioTracks
- Events affecting text tracks are sent to the
TextTrackList
object indicated byHTMLMediaElement.textTracks
.
Constructor
TrackEvent()
- Creates and initializes a new
TrackEvent
object with the event type specified, as well as optional additional properties.
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
, orTextTrack
).
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 callled for any addtrack
or removetrack
event on the first <video>
element found in the document.
var 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) {
var 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 | Status | Comment |
HTML Living StandardThe definition of 'TrackEvent' in that specification. | Living Standard | Initial definition. |
HTML5The definition of 'TrackEvent' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
TrackEvent
|
Chrome
Full support Yes |
Edge
Full support ≤79 |
Firefox
? |
IE
? |
Opera
? |
Safari
? |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
? |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support Yes |
track
|
Chrome
Full support Yes |
Edge
Full support ≤79 |
Firefox
? |
IE
? |
Opera
? |
Safari
? |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
? |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
TrackEvent by Mozilla Contributors is licensed under CC-BY-SA 2.5.