TextTrack: evento cuechange

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.

El evento cuechange se activa cuando un TextTrack ha cambiado las anotaciones que se estan mostrando. El evento es activado tanto en TextTrack y en el HTMLTrackElement donde esta siendo mostrado, si lo hay.

Burbujas No
Cancelable No
Interfaz Event
Propiedad del controlador de eventos GlobalEventHandlers.oncuechange

Ejemplos

En el TextTrack

Tu puedes preparar una escucha para el evento cuechange en un TextTrack usando el método addEventListener():

js
track.addEventListener("cuechange", function () {
  let cues = track.activeCues; // array de las anotaciones actuales
});

O puedes solo preparar la propiedad del controlador de eventos oncuechange:

js
track.oncuechange = function () {
  let cues = track.activeCues; // array of current cues
};

En el elemento track

El subyacente TextTrack, indicado por la propiedad track, recive un evento cuechange cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.

Si la pista de texto está asociada con el elemento multimedia, usando el elemento <track> como hijo del elemento <audio> o del elemento <video>, el evento cuechange es también enviado al HTMLTrackElement.

js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Además, puedes utilizar el controlador de eventos oncuechange:

js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
});

Especificaciones

Specification
HTML
# event-media-cuechange
HTML
# handler-texttrack-oncuechange

Compatibilidad con navegadores

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
cuechange event

Legend

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

Full support
Full support

Ver también