SourceBuffer.videoTracks — Eigenschaft · JavaScript-Referenz

Signatur

SourceBuffer.videoTracks

Beschreibung

Mit SourceBuffer.videoTracks fragst du ab, welche Videospuren die Medienabschnitte enthalten, die du per appendBuffer() in einen SourceBuffer geschrieben hast. Du bekommst ein VideoTrackList-Objekt. Jeder Eintrag ist ein VideoTrack mit Eigenschaften wie id, kind, label, language und selected.

Die Liste füllt sich erst, wenn der Browser das Initialisierungssegment verarbeitet hat, also z. B. die moov-Box bei fragmentiertem MP4 oder den Header bei WebM. Direkt nach addSourceBuffer() ist sie leer. Kommen neue Spuren hinzu, löst die Liste ein addtrack-Event aus. Werden Spuren entfernt, feuert removetrack.

Praktisch ist die Eigenschaft für adaptive Player, die mehrere Videospuren (z. B. Kamerawinkel) in einem Stream mitliefern. Du kannst die Spuren auflisten und über track.selected = true eine aktive Spur wählen. In einer VideoTrackList ist immer höchstens eine Spur ausgewählt. Die Spuren eines SourceBuffer erscheinen zusätzlich in HTMLMediaElement.videoTracks des zugehörigen Medienelements.

Rückgabewert

Typ

VideoTrackList

Beschreibung

Eine Live-Liste der VideoTrack-Objekte im SourceBuffer. Sie ist leer, solange noch kein Initialisierungssegment verarbeitet wurde.

Beispiele

Videospuren nach dem ersten Segment auflisten

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  const mime = 'video/mp4; codecs="avc1.42E01E"';
  const sb = mediaSource.addSourceBuffer(mime);

  const init = await (await fetch('/media/init.mp4')).arrayBuffer();
  sb.addEventListener('updateend', () => {
    if (!('videoTracks' in sb)) {
      console.warn('SourceBuffer.videoTracks wird nicht unterstützt');
      return;
    }
    for (const track of sb.videoTracks) {
      console.log(track.id, track.kind, track.label, track.selected);
    }
  }, { once: true });
  sb.appendBuffer(init);
});

1 main Hauptkamera true

Auf neue Spuren mit addtrack reagieren

const watchVideoTracks = (sourceBuffer) => {
  const tracks = sourceBuffer.videoTracks;
  if (!tracks) return;

  const onAdd = (event) => {
    console.log(`Neue Videospur: ${event.track.label || event.track.id}`);
  };
  tracks.addEventListener('addtrack', onAdd);
  tracks.onremovetrack = (event) => {
    console.log(`Spur entfernt: ${event.track.id}`);
  };

  // Aufräumfunktion zurückgeben
  return () => {
    tracks.removeEventListener('addtrack', onAdd);
    tracks.onremovetrack = null;
  };
};

Neue Videospur: Hauptkamera

Alternativen Kamerawinkel auswählen

const selectVideoTrack = (sourceBuffer, label) => {
  const tracks = sourceBuffer.videoTracks;
  for (let i = 0; i < tracks.length; i++) {
    if (tracks[i].label === label) {
      tracks[i].selected = true; // wählt die übrigen Spuren automatisch ab
      console.log(`Aktive Spur: ${label} (Index ${tracks.selectedIndex})`);
      return true;
    }
  }
  return false;
};

selectVideoTrack(sb, 'Tribüne');

Aktive Spur: Tribüne (Index 1)

// Wichtig · Fallstricke

Browser-Unterstützung: Die Eigenschaft wird derzeit praktisch nur von Safari unterstützt. Chrome und Firefox implementieren VideoTrackList gar nicht oder nur hinter einem Flag (Firefox: media.track.enabled). Prüfe deshalb vorher mit 'videoTracks' in sourceBuffer.
Direkt nach addSourceBuffer() ist die Liste leer. Sie ist erst verlässlich, wenn das Initialisierungssegment angehängt wurde, also nach dem ersten updateend.
Die Eigenschaft ist schreibgeschützt. Du kannst ihr keine eigene Liste zuweisen, aber die selected-Eigenschaft der einzelnen Spuren ändern.
Die meisten MSE-Streams, z. B. DASH/HLS mit nur einer Videospur pro Buffer, enthalten genau eine Spur. Für Qualitätsstufen ist die Liste nicht gedacht. Die wechselst du über getrennte Segmente, nicht über Spuren.
Wurde der SourceBuffer per removeSourceBuffer() entfernt, werden seine Spuren auch aus HTMLMediaElement.videoTracks gelöscht.

Siehe auch

SourceBuffer SourceBuffer.audioTracks SourceBuffer.textTracks VideoTrackList VideoTrack HTMLMediaElement.videoTracks SourceBuffer.appendBuffer() MediaSource.addSourceBuffer()