SourceBufferList.length — Eigenschaft · JavaScript-Referenz

Signatur

SourceBufferList.length

Beschreibung

SourceBufferList.length ist eine schreibgeschützte Eigenschaft der Media Source Extensions (MSE). Sie liefert die Anzahl der SourceBuffer-Objekte, die sich aktuell in der Liste befinden. Eine solche Liste bekommst du über MediaSource.sourceBuffers (alle Puffer) oder über MediaSource.activeSourceBuffers (nur die Puffer, deren Spuren gerade ausgewählt bzw. aktiv sind).

Die Liste ist live: Sobald du mit MediaSource.addSourceBuffer() einen Puffer anlegst oder ihn mit MediaSource.removeSourceBuffer() entfernst, ändert sich length sofort. SourceBufferList ist kein echtes Array. Du kannst aber mit Index-Zugriff (list[i]) und length in einer klassischen for-Schleife darüber laufen, oder die Liste mit Array.from() umwandeln.

Typische Anwendungsfälle: prüfen, ob schon Puffer angelegt wurden, bevor du MediaSource.endOfStream() aufrufst; über alle Puffer gehen, um zu prüfen, ob gerade ein Update läuft (updating); und Diagnose- oder Debug-Ausgaben in eigenen Streaming-Playern.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative ganze Zahl (unsigned long): die aktuelle Anzahl der SourceBuffer-Objekte in der Liste. Ist die Liste leer, ist der Wert 0.

Beispiele

Anzahl der Puffer nach addSourceBuffer() prüfen

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

mediaSource.addEventListener('sourceopen', () => {
  console.log('Vorher:', mediaSource.sourceBuffers.length);

  const mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
  if (MediaSource.isTypeSupported(mime)) {
    mediaSource.addSourceBuffer(mime);
  }

  console.log('Nachher:', mediaSource.sourceBuffers.length);
});

Vorher: 0 Nachher: 1

Vor endOfStream() warten, bis kein Puffer mehr updating ist

const allBuffersIdle = (list) => {
  for (let i = 0; i < list.length; i++) {
    if (list[i].updating) return false;
  }
  return true;
};

const finishStream = (mediaSource) => {
  const list = mediaSource.sourceBuffers;
  if (list.length === 0) {
    console.warn('Keine SourceBuffer vorhanden.');
    return;
  }
  if (allBuffersIdle(list) && mediaSource.readyState === 'open') {
    mediaSource.endOfStream();
    console.log(`Stream beendet (${list.length} Puffer).`);
  } else {
    // später erneut versuchen
    setTimeout(() => finishStream(mediaSource), 50);
  }
};

Stream beendet (2 Puffer).

Aktive Puffer mit allen Puffern vergleichen

const logBufferStats = (mediaSource) => {
  const total = mediaSource.sourceBuffers.length;
  const active = mediaSource.activeSourceBuffers.length;
  console.log(`SourceBuffer: ${total}, davon aktiv: ${active}`);

  // Umwandlung in ein echtes Array für Array-Methoden
  const ranges = Array.from(mediaSource.sourceBuffers, (sb) => sb.buffered.length);
  console.log('Gepufferte Zeitbereiche pro Puffer:', ranges);
};

mediaSource.addEventListener('sourceopen', () => {
  mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
  mediaSource.addSourceBuffer('audio/webm; codecs="opus"');
  logBufferStats(mediaSource);
});

SourceBuffer: 2, davon aktiv: 2 Gepufferte Zeitbereiche pro Puffer: [0, 0]

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie list.length = 0 wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Puffer entfernst du nur mit MediaSource.removeSourceBuffer().
Live-Liste: Wenn du beim Iterieren Puffer entfernst, ändern sich length und die Indizes. Lauf dann rückwärts oder kopiere die Liste vorher mit Array.from().
Zeitpunkt: Puffer lassen sich erst nach dem Ereignis sourceopen anlegen. Davor ist length immer 0.
activeSourceBuffers kann kleiner sein als sourceBuffers. Das passiert zum Beispiel, wenn Spuren abgewählt sind oder noch kein Initialisierungssegment angehängt wurde.
Kompatibilität: MSE wird in Chrome, Edge, Firefox und Safari (Desktop) unterstützt. Auf dem iPhone steht es erst ab iOS 17.1 als ManagedMediaSource zur Verfügung. Prüfe vorher mit 'MediaSource' in window bzw. 'ManagedMediaSource' in window. In Dedicated Workers ist MSE nur in einigen Browsern verfügbar (Chrome 108+).

Siehe auch

SourceBufferList SourceBuffer MediaSource.sourceBuffers MediaSource.activeSourceBuffers MediaSource.prototype.addSourceBuffer() MediaSource.prototype.removeSourceBuffer()