TextTrack: cuechange event

{{APIRef("WebVTT")}}

The cuechange event fires when a {{domxref("TextTrack")}} has changed the currently displaying cues. The event is fired on both the TextTrack and the {{domxref("HTMLTrackElement")}} in which it's being presented, if any.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

addEventListener("cuechange", (event) => { })

oncuechange = (event) => { }

Event type

A generic {{DOMxRef("Event")}} with no added properties.

Examples

You can set up a listener for the cuechange event on a TextTrack using the {{domxref("EventTarget.addEventListener", "addEventListener()")}} method:

track.addEventListener("cuechange", () => {
  const cues = track.activeCues; // array of current cues
  // …
});

Or you can set the oncuechange event handler property:

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{glossary("WebVTT")}}
• The same event on {{domxref("HTMLTrackElement")}}: {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}}