VideoTrack.label — Eigenschaft · JavaScript-Referenz

Signatur

VideoTrack.label

Beschreibung

Die schreibgeschützte Eigenschaft label eines VideoTrack-Objekts gibt die für Menschen lesbare Bezeichnung des Videotracks zurück. Diese stammt in der Regel aus den Metadaten der Mediendatei (z. B. aus dem Container MP4, WebM oder einer HLS-Playlist) und kann Namen wie „Hauptperspektive“, „Gebärdensprache“ oder „Regiekommentar“ enthalten.

Nützlich ist label vor allem, wenn Sie eine eigene Auswahl für Videotracks bauen, etwa ein Menü, in dem Nutzer zwischen Kamerawinkeln oder alternativen Fassungen wechseln. Auf die Tracks greifen Sie über HTMLMediaElement.videoTracks zu, das eine VideoTrackList liefert.

Gibt es in den Metadaten keine Bezeichnung, ist der Wert eine leere Zeichenfolge (""), niemals null. Für eine robuste Oberfläche sollten Sie deshalb auf andere Angaben ausweichen, zum Beispiel kind, language oder die Position des Tracks in der Liste.

Rückgabewert

Typ

string

Beschreibung

Die lesbare Bezeichnung des Videotracks oder eine leere Zeichenfolge "", wenn keine Bezeichnung vorhanden ist. Die Eigenschaft ist schreibgeschützt.

Beispiele

Bezeichnungen aller Videotracks auflisten

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

video.addEventListener('loadedmetadata', () => {
  // videoTracks wird nicht überall unterstützt
  if (!video.videoTracks) {
    console.warn('VideoTrackList wird nicht unterstützt');
    return;
  }

  for (const track of video.videoTracks) {
    console.log(`${track.id}: ${track.label || '(ohne Bezeichnung)'}`);
  }
});

1: Hauptperspektive 2: Regiekommentar 3: (ohne Bezeichnung)

Auswahlmenü für Kamerawinkel mit Ersatzbezeichnung

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

const buildTrackMenu = () => {
  const tracks = video.videoTracks;
  if (!tracks) return;

  select.replaceChildren();
  Array.from(tracks).forEach((track, index) => {
    const option = document.createElement('option');
    option.value = String(index);
    // Ersatztext, falls label leer ist
    option.textContent = track.label || `Spur ${index + 1} (${track.kind || 'unbekannt'})`;
    option.selected = track.selected;
    select.append(option);
  });
};

select.addEventListener('change', () => {
  // Setzt man selected = true, wird der bisher gewählte Track automatisch abgewählt
  video.videoTracks[Number(select.value)].selected = true;
});

video.addEventListener('loadedmetadata', buildTrackMenu);
video.videoTracks?.addEventListener('addtrack', buildTrackMenu);

Track anhand der Bezeichnung finden

const findTrackByLabel = (media, label) =>
  Array.from(media.videoTracks ?? []).find(
    (track) => track.label.toLowerCase() === label.toLowerCase()
  ) ?? null;

const video = document.querySelector('video');
const signTrack = findTrackByLabel(video, 'Gebärdensprache');

if (signTrack) {
  signTrack.selected = true;
  console.log('Gewählt:', signTrack.label);
} else {
  console.log('Kein passender Track gefunden');
}

Gewählt: Gebärdensprache

// Wichtig · Fallstricke

Browser-Unterstützung: VideoTrack und HTMLMediaElement.videoTracks gibt es standardmäßig nur in Safari. In Chrome sind sie nur über ein Experimentier-Flag verfügbar, in Firefox nur über die Einstellung media.track.enabled. Prüfen Sie deshalb vorher, ob die Funktion vorhanden ist (if (video.videoTracks)).
Der Wert ist oft leer (""), weil viele Mediendateien keine Track-Namen enthalten. Sehen Sie in der Oberfläche immer einen Ersatztext vor.
Die Eigenschaft ist schreibgeschützt: Wer sie zuweist, erreicht nichts (im Strict Mode wird ein TypeError ausgelöst).
Die Bezeichnung wird nicht übersetzt. Sie steht so da, wie sie in den Metadaten hinterlegt ist. Für sprachabhängige Anzeigen ziehen Sie language heran.
Tracks stehen erst nach dem Laden der Metadaten zuverlässig bereit. Warten Sie daher auf loadedmetadata oder auf das Ereignis addtrack der VideoTrackList.
Bezeichnungen stammen aus der Mediendatei und damit womöglich aus fremden Quellen. Setzen Sie sie per textContent ein, nicht per innerHTML, damit kein XSS möglich ist.

Siehe auch

VideoTrack VideoTrack.kind VideoTrack.language VideoTrack.id VideoTrack.selected VideoTrackList HTMLMediaElement.videoTracks AudioTrack.label