VideoTrackList: removetrack — Ereignis · JavaScript-Referenz

Signatur

videoTrackList.addEventListener("removetrack", handler)

Beschreibung

Das Ereignis removetrack wird auf einer VideoTrackList ausgelöst, sobald eine VideoTrack aus der Liste entfernt wurde. Die Liste erhältst du über HTMLMediaElement.videoTracks eines <video>-Elements. Das Ereignis ist vom Typ TrackEvent. Seine Eigenschaft track verweist auf die entfernte VideoTrack.

Einen Listener registrierst du entweder mit addEventListener("removetrack", handler) oder über die Eigenschaft onremovetrack. Das Ereignis steigt nicht auf (bubbling) und lässt sich nicht abbrechen.

Typische Einsatzfälle sind Player-Oberflächen, die eine Auswahl der Videospuren anbieten (z. B. verschiedene Kamerawinkel). Wird eine Spur entfernt, etwa weil sich die src ändert oder eine Media-Source-Extensions-Quelle umgebaut wird, muss die Auswahlliste angepasst werden. Das Gegenstück ist addtrack. Ändert sich nur, welche Spur ausgewählt ist, wird stattdessen change ausgelöst.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"removetrack"`.
$handler Pflicht	(event: TrackEvent) => void		Callback-Funktion. Sie erhält ein `TrackEvent`, dessen Eigenschaft `event.track` die entfernte `VideoTrack` enthält.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Die Informationen stecken im übergebenen TrackEvent.

Beispiele

Entfernte Spur mit addEventListener protokollieren

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

if ('videoTracks' in video) {
  video.videoTracks.addEventListener('removetrack', (event) => {
    const { id, label, kind } = event.track;
    console.log(`Spur entfernt: ${label || id} (${kind})`);
    console.log(`Verbleibende Spuren: ${video.videoTracks.length}`);
  });
} else {
  console.warn('VideoTrackList wird von diesem Browser nicht unterstützt.');
}

Spur entfernt: Kamera 2 (alternative) Verbleibende Spuren: 1

Spurauswahl im Player aktualisieren (on-Property)

const video = document.querySelector('#player');
const select = document.querySelector('#track-select');

const renderOptions = () => {
  select.replaceChildren(
    ...Array.from(video.videoTracks, (track, i) =>
      new Option(track.label || `Spur ${i + 1}`, track.id, false, track.selected)
    )
  );
};

video.videoTracks.onaddtrack = renderOptions;
video.videoTracks.onremovetrack = (event) => {
  console.log('Entfernt:', event.track.id);
  renderOptions();
};

Entfernt: 2

Listener wieder entfernen (removeEventListener / AbortSignal)

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

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

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

// Später, z. B. beim Abbauen der Player-Komponente:
const destroyPlayer = () => {
  video.videoTracks.removeEventListener('removetrack', onRemove);
  // oder alternativ: controller.abort();
};

destroyPlayer();

// Wichtig · Fallstricke

Browser-Kompatibilität: HTMLMediaElement.videoTracks und damit VideoTrackList gibt es standardmäßig praktisch nur in Safari. In Chrome, Edge und Firefox ist die API nur hinter experimentellen Flags verfügbar. Prüfe sie daher immer vorher mit 'videoTracks' in video.
Das Ereignis wird nach dem Entfernen ausgelöst. videoTracks.length und getTrackById() geben also schon den neuen Zustand wieder. event.track kannst du trotzdem noch lesen.
Verwechslungsgefahr: removetrack gibt es auch auf AudioTrackList, TextTrackList und MediaStream. Bei MediaStream ist das Ereignis ein MediaStreamTrackEvent, kein TrackEvent.
Wechselst du nur die ausgewählte Spur (track.selected), wird kein removetrack ausgelöst, sondern change.
Ein Wert in onremovetrack ersetzt einen zuvor gesetzten Handler. Mit addEventListener kannst du dagegen mehrere Listener registrieren.

Siehe auch

VideoTrackList: addtrack VideoTrackList: change AudioTrackList: removetrack TextTrackList: removetrack AudioTrackList: addtrack