VideoTrackList.length — Eigenschaft · JavaScript-Referenz

Signatur

get VideoTrackList.prototype.length

Beschreibung

Die schreibgeschützte Eigenschaft length einer VideoTrackList gibt an, wie viele Videospuren ein Medienelement enthält. Jeder Eintrag ist ein VideoTrack. Die Liste erhältst du über HTMLMediaElement.videoTracks, meistens von einem <video>-Element.

Brauchen kannst du length vor allem in diesen Fällen:

Du willst prüfen, ob eine Datei mehrere Videospuren hat, zum Beispiel verschiedene Kamerawinkel oder eine Spur mit Gebärdensprache.
Du willst in einer klassischen for-Schleife über die Spuren gehen. Die Liste unterstützt den Zugriff per Index (videoTracks[i]) und ist iterierbar.
Du willst eine Spur-Auswahl in der Oberfläche nur anzeigen, wenn es mehr als eine Spur gibt.

Der Wert ist live: Er ändert sich, sobald der Browser Spuren hinzufügt oder entfernt, zum Beispiel beim Laden der Metadaten oder bei adaptivem Streaming. Vor dem Ereignis loadedmetadata ist length oft noch 0. Deshalb solltest du den Wert erst danach auswerten oder auf die Ereignisse addtrack und removetrack der Liste hören.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ab 0: die aktuelle Anzahl der VideoTrack-Einträge in der Liste. Ist noch keine Spur bekannt oder hat das Medium keine Videospur, ist der Wert 0.

Beispiele

Anzahl der Videospuren nach dem Laden der Metadaten ausgeben

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

video.addEventListener('loadedmetadata', () => {
  // Unterstützung prüfen: videoTracks gibt es nicht in allen Browsern
  if (!('videoTracks' in video)) {
    console.log('VideoTrackList wird nicht unterstützt');
    return;
  }
  console.log(`Videospuren: ${video.videoTracks.length}`);
});

Videospuren: 2

Über alle Spuren gehen und eine bestimmte auswählen

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

const selectTrackByLabel = (label) => {
  const tracks = video.videoTracks;
  for (let i = 0; i < tracks.length; i++) {
    const track = tracks[i];
    // Setzt man selected auf true, werden die anderen Spuren automatisch abgewählt
    if (track.label === label) {
      track.selected = true;
      return track;
    }
  }
  return null;
};

video.addEventListener('loadedmetadata', () => {
  const track = selectTrackByLabel('Kamera 2');
  console.log(track ? `Aktiv: ${track.label}` : 'Spur nicht gefunden');
});

Aktiv: Kamera 2

Spur-Auswahl in der Oberfläche nur bei mehreren Spuren anzeigen

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

const updateSwitcher = () => {
  const count = video.videoTracks.length;
  switcher.hidden = count < 2;
  console.log(`Spuren aktuell: ${count}`);
};

if ('videoTracks' in video) {
  // length ist live, deshalb bei jeder Änderung neu auswerten
  video.videoTracks.addEventListener('addtrack', updateSwitcher);
  video.videoTracks.addEventListener('removetrack', updateSwitcher);
  // Alternativ: video.videoTracks.onaddtrack = updateSwitcher;
}

Spuren aktuell: 1 Spuren aktuell: 2

// Wichtig · Fallstricke

Browser-Unterstützung: Standardmäßig unterstützt nur Safari VideoTrackList. In Chrome ist die API nur mit dem Flag „Experimental Web Platform features“ verfügbar, in Firefox nur mit der Einstellung media.track.enabled. Prüfe die Unterstützung deshalb immer vorher mit 'videoTracks' in video.
Zeitpunkt: Vor loadedmetadata ist length meist 0. Ein zu früh gelesener Wert von 0 heißt nicht, dass das Medium keine Videospur hat.
Live-Wert: Wenn du in einer Schleife Spuren änderst oder während einer Schleife Spuren dazukommen, kann sich length ändern. Lies den Wert bei Bedarf einmal in eine Variable oder mach mit Array.from(video.videoTracks) eine Momentaufnahme.
Schreibgeschützt: Eine Zuweisung wie videoTracks.length = 0 wird ignoriert (im Strict Mode wirft sie einen TypeError). Spuren lassen sich so nicht entfernen.
Anders als bei AudioTrackList kann immer nur eine Videospur gleichzeitig ausgewählt sein. Welche das ist, verrät selectedIndex.
Bei MSE-Streams (Media Source Extensions) hat jeder SourceBuffer zusätzlich eine eigene videoTracks-Liste.

Siehe auch

VideoTrackList.selectedIndex AudioTrackList.length ImageTrackList.length TextTrackList.length DOMRectList.length