HTMLTrackElement: cuechange event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The cuechange
event fires when a TextTrack
has changed the currently displaying cues. The event is fired on both the TextTrack
and the HTMLTrackElement
in which it's being presented, if any.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("cuechange", (event) => {});
oncuechange = (event) => {};
Event type
A generic Event
with no added properties.
Examples
The underlying TextTrack
, indicated by the track
property, receives a cuechange
event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.
If the track is associated with a media element, using the <track>
element as a child of the <audio>
or <video>
element, the cuechange
event is also sent to the HTMLTrackElement
.
let textTrackElem = document.getElementById("text-track");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
Alternatively, you can use the oncuechange
event handler:
let textTrackElem = document.getElementById("text-track");
textTrackElem.oncuechange = (event) => {
let cues = event.target.track.activeCues;
};
Specifications
Specification |
---|
HTML Standard # event-media-cuechange |
HTML Standard # handler-oncuechange |
Browser compatibility
BCD tables only load in the browser