VideoTrack.id — Eigenschaft · JavaScript-Referenz

Signatur

VideoTrack.id

Beschreibung

Die schreibgeschützte Eigenschaft id eines VideoTrack-Objekts liefert einen String, der die Videospur eindeutig kennzeichnet. Mit dieser Kennung kann man eine bestimmte Spur über VideoTrackList.getTrackById() gezielt abrufen, etwa um zwischen verschiedenen Kamerawinkeln oder einer Gebärdensprach-Spur umzuschalten.

Woher der Wert kommt, hängt vom Containerformat ab. Bei MP4/ISO BMFF entspricht er der Track-ID aus dem tkhd-Box, bei WebM der Track-Nummer, und bei MPEG-2-Transportströmen der Programm-ID (PID). Enthält die Medien-URL ein Media Fragment mit Track-Auswahl (z. B. #track=...), lässt sich die Spur über diese Kennung ansprechen.

Liefert das Medienformat keine Kennung, ist id ein leerer String. Der Wert ist nur innerhalb einer Medienressource eindeutig, nicht über mehrere <video>-Elemente hinweg.

Rückgabewert

Typ

string

Beschreibung

Die Kennung der Videospur oder ein leerer String, wenn das Format keine Kennung liefert.

Beispiele

Alle Videospuren mit ID auflisten

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

video.addEventListener('loadedmetadata', () => {
  // videoTracks gibt es nicht in allen Browsern
  if (!video.videoTracks) {
    console.warn('VideoTrackList wird nicht unterstützt');
    return;
  }
  for (const track of video.videoTracks) {
    console.log(`ID: "${track.id}", Art: ${track.kind}, Sprache: ${track.language}`);
  }
});

ID: "1", Art: main, Sprache: ID: "2", Art: sign, Sprache: de

Bestimmte Spur per ID auswählen

const selectTrackById = (video, id) => {
  const tracks = video.videoTracks;
  const target = tracks?.getTrackById(id);
  if (!target) return false;
  // Bei Videospuren ist immer nur eine ausgewählt
  target.selected = true;
  return true;
};

const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
  console.log(selectTrackById(video, '2') ? 'Spur 2 aktiv' : 'Spur nicht gefunden');
});

Spur 2 aktiv

Auswahlmenü aus Spur-IDs erzeugen

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

video.addEventListener('loadedmetadata', () => {
  const tracks = video.videoTracks ?? [];
  for (const track of tracks) {
    const option = new Option(track.label || `Spur ${track.id || '?'}`, track.id);
    option.selected = track.selected;
    select.append(option);
  }
});

select.addEventListener('change', () => {
  const track = video.videoTracks.getTrackById(select.value);
  if (track) track.selected = true;
});

// Wichtig · Fallstricke

Browser-Unterstützung: HTMLMediaElement.videoTracks und damit VideoTrack.id sind nur in Safari standardmäßig verfügbar. In Chrome/Edge ist ein Experimental-Flag nötig, in Firefox die Einstellung media.track.enabled. Vor dem Zugriff immer prüfen, ob es video.videoTracks gibt.
Leerer String: Liefert der Container keine Track-IDs, ist id gleich "". Dann findet getTrackById() die Spur nicht zuverlässig; nutzen Sie stattdessen den Index in der VideoTrackList.
Zeitpunkt: Spuren und ihre IDs stehen erst nach dem Ereignis loadedmetadata fest. Wenn sich die Spuren ändern, z. B. bei MSE oder Live-Streams, feuern auf der Liste die Ereignisse addtrack/removetrack.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert, im Strict Mode wirft sie einen TypeError.

Siehe auch

ImageTrack.animated VideoTrack.kind VideoTrack.label VideoTrack.selected VideoTrack.language