TextTrackList: removetrack — Ereignis · JavaScript-Referenz

Signatur

textTrackList.addEventListener("removetrack", handler)

Beschreibung

Das Event removetrack wird an der TextTrackList eines <video>- oder <audio>-Elements (erreichbar über media.textTracks) ausgelöst, wenn ein TextTrack aus dieser Liste verschwindet. Typischer Auslöser ist das Entfernen eines <track>-Elements aus dem DOM, z. B. per trackElement.remove().

Das Event-Objekt ist ein TrackEvent. Seine Eigenschaft track verweist auf den entfernten TextTrack. Das Event lässt sich nicht abbrechen und steigt nicht auf (kein Bubbling).

Registrieren kann man den Handler entweder mit addEventListener("removetrack", handler) oder über die Eigenschaft textTracks.onremovetrack. Das Event ist nützlich, um eigene Bedienelemente eines Players, etwa ein Untertitel-Auswahlmenü, mit den tatsächlich verfügbaren Tracks abzugleichen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Event-Name `"removetrack"`.
$handler Pflicht	(event: TrackEvent) => void		Callback, das ein `TrackEvent` erhält; `event.track` ist der entfernte `TextTrack`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener liefert keinen Wert. Der Handler erhält ein TrackEvent.

Beispiele

Entfernten Untertitel-Track mit addEventListener protokollieren

const video = document.querySelector('video');

video.textTracks.addEventListener('removetrack', (event) => {
  const { label, language, kind } = event.track;
  console.log(`Entfernt: ${label} (${language}, ${kind})`);
  console.log(`Verbleibende Tracks: ${video.textTracks.length}`);
});

// <track>-Element entfernen – löst removetrack aus
video.querySelector('track[srclang="de"]')?.remove();

Entfernt: Deutsch (de, subtitles) Verbleibende Tracks: 1

Untertitel-Menü über onremovetrack synchron halten

const video = document.querySelector('video');
const menu = document.querySelector('#subtitle-menu');

const renderMenu = () => {
  menu.replaceChildren(
    ...Array.from(video.textTracks, (track, i) => {
      const option = document.createElement('option');
      option.value = String(i);
      option.textContent = track.label || track.language || `Track ${i + 1}`;
      return option;
    })
  );
};

video.textTracks.onaddtrack = renderMenu;
video.textTracks.onremovetrack = renderMenu;
renderMenu();

Listener mit AbortController wieder entfernen

const video = document.querySelector('video');
const controller = new AbortController();

const onRemove = (event) => {
  console.log('Track entfernt:', event.track.label);
};

video.textTracks.addEventListener('removetrack', onRemove, {
  signal: controller.signal
});

// Später, z. B. beim Abbau des Players:
controller.abort();
// alternativ: video.textTracks.removeEventListener('removetrack', onRemove);

// Wichtig · Fallstricke

Per media.addTextTrack() erzeugte Tracks lassen sich über die API nicht wieder entfernen. Für sie wird removetrack daher praktisch nie ausgelöst. Wer Tracks dynamisch entfernen will, sollte mit <track>-Elementen arbeiten.
Das Event wird an der TextTrackList ausgelöst, nicht am Media-Element. Ein Listener auf video reagiert nicht darauf.
Das Event wird asynchron (als Task) ausgelöst. Direkt nach track.remove() ist der Handler also noch nicht gelaufen.
Wird die src des Media-Elements neu gesetzt, können Tracks im Zuge des Ladealgorithmus entfernt werden und das Event auslösen. Daran sollte man bei der Menü-Logik denken.
Browser-Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen das Event seit vielen Jahren. Sehr alte Versionen von Firefox bzw. Internet Explorer kannten es nicht.

Siehe auch

TextTrackList: change TextTrackList TrackEvent HTMLMediaElement.textTracks HTMLTrackElement HTMLTextAreaElement: select