Signatur
Beschreibung
Die Eigenschaft addedRanges gehört zum BufferedChangeEvent, das ein ManagedSourceBuffer als bufferedchange-Ereignis auslöst, sobald sich sein gepufferter Bereich ändert. Sie enthält ein TimeRanges-Objekt mit genau den Zeitspannen (in Sekunden), die seit der letzten Änderung neu in den Puffer gekommen sind, z. B. nach einem erfolgreichen appendBuffer().
Damit lässt sich der Puffer-Füllstand verfolgen, ohne bei jeder Änderung das komplette buffered-Attribut mit dem vorherigen Stand vergleichen zu müssen. Das ist nützlich für Fortschrittsanzeigen, Diagnose-Logs oder eigene Streaming-Logik, die entscheidet, welche Segmente als Nächstes geladen werden.
Das Gegenstück ist removedRanges. Dort stehen die Spannen, die entfernt wurden, entweder durch remove() oder, was bei Managed Media Source typisch ist, durch den Browser selbst, wenn er Speicher freigibt. Ist nichts hinzugekommen, ist addedRanges ein leeres TimeRanges-Objekt (length === 0).
Rückgabewert
TimeRanges-Objekt. Über length, start(i) und end(i) liest man die neu gepufferten Zeitspannen in Sekunden aus. Wenn nichts hinzugefügt wurde, ist das Objekt leer.Beispiele
Neu gepufferte Bereiche protokollieren
const video = document.querySelector('video');
if ('ManagedMediaSource' in window) {
const source = new ManagedMediaSource();
video.disableRemotePlayback = true; // bei MMS in Safari für das Abspielen erforderlich
video.src = URL.createObjectURL(source);
source.addEventListener('sourceopen', () => {
const sb = source.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
sb.addEventListener('bufferedchange', (event) => {
const { addedRanges } = event;
for (let i = 0; i < addedRanges.length; i++) {
console.log(`Hinzugefügt: ${addedRanges.start(i).toFixed(2)}s – ${addedRanges.end(i).toFixed(2)}s`);
}
});
});
}Hilfsfunktion: TimeRanges in ein Array umwandeln
const rangesToArray = (ranges) =>
Array.from({ length: ranges.length }, (_, i) => [ranges.start(i), ranges.end(i)]);
sourceBuffer.onbufferedchange = (event) => {
const added = rangesToArray(event.addedRanges);
const removed = rangesToArray(event.removedRanges);
console.log({ added, removed });
};Gesamte neu gepufferte Dauer für eine Statistik summieren
let totalBufferedSeconds = 0;
const onBufferedChange = (event) => {
const { addedRanges } = event;
for (let i = 0; i < addedRanges.length; i++) {
totalBufferedSeconds += addedRanges.end(i) - addedRanges.start(i);
}
console.log(`Bisher geladen: ${totalBufferedSeconds.toFixed(1)} s`);
};
sourceBuffer.addEventListener('bufferedchange', onBufferedChange);
// Später aufräumen:
// sourceBuffer.removeEventListener('bufferedchange', onBufferedChange);// Wichtig · Fallstricke
- Kompatibilität:
BufferedChangeEventundManagedMediaSourcewerden bisher vor allem von Safari (ab 17, iOS ab 17.1) unterstützt. Prüfe die Unterstützung mit'ManagedMediaSource' in windowund nutze sonst die klassischeMediaSourceohne dieses Ereignis. - Nur die Differenz:
addedRangesenthält lediglich die neuen Spannen, nicht den ganzen Puffer. Den aktuellen Gesamtstand liefertsourceBuffer.buffered. - Grenzen: Wenn du
start(i)oderend(i)mit einem Index>= lengthaufrufst, wird eineIndexSizeError-DOMExceptionausgelöst. Prüfelengthimmer vorher. - Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ignoriert, im Strict Mode gibt es einen
TypeError. - Werte sind Gleitkommazahlen. Rundungsabweichungen im Bereich von Millisekunden an Segmentgrenzen sind normal.