The cuechange
event fires when a TextTrack
has changed the currently displaying cues. The event is fired at both the TextTrack
and at the HTMLTrackElement
in which it's being presented, if any.
Bubbles | No |
Cancelable | No |
Interface | Event
|
Event handler | oncuechange
|
Examples
On the TextTrack
You can set up a listener for the cuechange
event on a TextTrack
using the addEventListener()
method:
track.addEventListener('cuechange', function () {
let cues = track.activeCues; // array of current cues
});
Or you can just set the oncuechange
event handler property:
track.oncuechange = function () {
let cues = track.activeCues; // array of current cues
}
On the track element
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("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
In addition, you can use the oncuechange
event handler:
let textTrackElem = document.getElementById("texttrack");
textTrackElem.oncuechange = (event) => {
let cues = event.target.track.activeCues;
});
Specifications
Specification | Status |
HTML Living StandardThe definition of 'cuechange' in that specification. | Living Standard |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
cuechange event
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support 31 |
IE
? |
Opera
? |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 31 |
Opera Android
No support No |
Safari iOS
? |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
See also
HTMLTrackElement: cuechange event by Mozilla Contributors is licensed under CC-BY-SA 2.5.