MediaSource.activeSourceBuffers — Eigenschaft · JavaScript-Referenz

Signatur

MediaSource.activeSourceBuffers

Beschreibung

Die schreibgeschützte Eigenschaft activeSourceBuffers des MediaSource-Interfaces gibt eine SourceBufferList zurück. Sie ist eine Teilmenge von MediaSource.sourceBuffers und enthält nur die Puffer, die gerade eine aktive Spur liefern: die ausgewählte Videospur (VideoTrack.selected), aktivierte Audiospuren (AudioTrack.enabled) und Textspuren im Modus "showing" oder "hidden".

Nützlich ist die Liste bei der Media Source Extensions-Wiedergabe (MSE), also beim adaptiven Streaming (DASH, HLS über hls.js/dash.js) oder bei eigenen Playern. Damit lässt sich zum Beispiel prüfen, welche Puffer gerade für die Wiedergabe gebraucht werden, wie weit sie gepuffert sind (buffered) oder ob nach einem Spurwechsel neue Daten angehängt werden müssen.

Die Liste ist live: Wechselt die Spurauswahl oder wird ein Puffer mit removeSourceBuffer() entfernt, ändert sie sich automatisch. Dabei feuert SourceBufferList die Ereignisse addsourcebuffer und removesourcebuffer. Die Eigenschaft hat keine Parameter, weil es ein reiner Getter ist.

Rückgabewert

Typ

SourceBufferList

Beschreibung

Eine live aktualisierte, array-ähnliche Liste der aktiven SourceBuffer-Objekte (Zugriff über den Index oder length, außerdem iterierbar). Ist keine Spur aktiv, bleibt sie leer.

Beispiele

Aktive Puffer nach dem Öffnen auslesen

const video = document.querySelector('video');
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    const sb = mediaSource.addSourceBuffer(mimeCodec);
    const data = await (await fetch('/media/frag_bunny.mp4')).arrayBuffer();

    sb.addEventListener('updateend', () => {
      console.log('Alle Puffer:', mediaSource.sourceBuffers.length);
      console.log('Aktive Puffer:', mediaSource.activeSourceBuffers.length);
    }, { once: true });

    sb.appendBuffer(data);
  });
}

Alle Puffer: 1 Aktive Puffer: 1

Gepufferten Bereich aller aktiven Puffer prüfen

// Liefert, wie viele Sekunden ab currentTime in ALLEN aktiven Puffern vorliegen
const bufferedAhead = (mediaSource, video) => {
  const t = video.currentTime;
  let minEnd = Infinity;

  for (const sb of mediaSource.activeSourceBuffers) {
    const ranges = sb.buffered;
    let end = t;
    for (let i = 0; i < ranges.length; i++) {
      if (ranges.start(i) <= t && t <= ranges.end(i)) end = ranges.end(i);
    }
    minEnd = Math.min(minEnd, end);
  }
  return minEnd === Infinity ? 0 : minEnd - t;
};

setInterval(() => {
  const ahead = bufferedAhead(mediaSource, video);
  if (ahead < 10) console.log(`Nur ${ahead.toFixed(1)} s gepuffert – nächstes Segment laden`);
}, 1000);

Nur 4.2 s gepuffert – nächstes Segment laden

Auf Änderungen der aktiven Puffer reagieren

const active = mediaSource.activeSourceBuffers;

active.addEventListener('addsourcebuffer', () => {
  console.log('Puffer aktiviert, jetzt aktiv:', active.length);
});

active.addEventListener('removesourcebuffer', () => {
  console.log('Puffer deaktiviert, jetzt aktiv:', active.length);
});

// Zum Beispiel Wechsel der Audiospur (sofern der Browser audioTracks unterstützt)
if (video.audioTracks && video.audioTracks.length > 1) {
  video.audioTracks[0].enabled = false;
  video.audioTracks[1].enabled = true;
}

Puffer deaktiviert, jetzt aktiv: 1 Puffer aktiviert, jetzt aktiv: 2

// Wichtig · Fallstricke

Keine echte Array-Instanz: SourceBufferList hat weder map() noch filter(). Mit Array.from(mediaSource.activeSourceBuffers) wandelst du sie um, oder du iterierst mit for…of.
Nicht automatisch alle Puffer: Ein Puffer landet erst in der Liste, wenn das Initialisierungssegment angehängt und eine seiner Spuren ausgewählt bzw. aktiviert ist. Direkt nach addSourceBuffer() kann die Liste daher noch leer sein.
Nach sourceclose (z. B. wenn video.src geändert wird) ist die Liste leer. Alte Referenzen auf einzelne Puffer solltest du dann nicht mehr verwenden.
Spurauswahl: video.audioTracks und video.videoTracks fehlen in Chrome und Firefox standardmäßig oder sind dort nur hinter einem Flag verfügbar. Das Beispiel mit dem Spurwechsel läuft deshalb nicht überall.
Kompatibilität: Chrome, Edge, Firefox und Safari auf dem Desktop unterstützen MSE. Auf dem iPhone gibt es MSE erst ab iOS 17.1, und zwar über ManagedMediaSource, das dieselbe Eigenschaft anbietet. In Dedicated Workern ist MediaSource nur in einigen Browsern verfügbar (Chrome 108+).

Siehe auch

MediaSource.sourceBuffers MediaSource.duration MediaSource.readyState MediaSource.handle MediaSource.canConstructInDedicatedWorker