Signatur
Beschreibung
Die Eigenschaft removedRanges gehört zum Interface BufferedChangeEvent der Managed Media Source API. Ein solches Ereignis vom Typ bufferedchange wird auf einem ManagedSourceBuffer ausgelöst, wenn sich dessen gepufferte Bereiche ändern. removedRanges liefert dabei ein TimeRanges-Objekt mit genau den Zeitabschnitten (in Sekunden), die aus dem Puffer verschwunden sind.
Anders als beim klassischen SourceBuffer darf der Browser bei ManagedMediaSource gepufferte Mediendaten selbstständig entfernen, etwa wenn der Speicher knapp wird. Genau diese Fälle meldet removedRanges. Aber auch Daten, die das eigene Skript mit SourceBuffer.remove() gelöscht hat, tauchen hier auf. Für einen Streaming-Player ist das wichtig: Wurden Bereiche entfernt, die noch abgespielt werden sollen, muss er die passenden Segmente erneut laden.
Das zurückgegebene Objekt ist nicht live, es gibt also den Stand zum Zeitpunkt des Ereignisses wieder. Den einzelnen Bereich i liest man mit start(i) und end(i) aus, die Anzahl der Bereiche steht in length. Wurde nichts entfernt, ist length gleich 0.
Rückgabewert
TimeRanges-Objekt mit den entfernten Zeitbereichen in Sekunden. Wurde nichts entfernt, ist length gleich 0.Beispiele
Entfernte Bereiche protokollieren
const video = document.querySelector('video');
const MS = window.ManagedMediaSource ?? window.MediaSource;
const source = new MS();
video.disableRemotePlayback = true; // für ManagedMediaSource ohne AirPlay-Quelle erforderlich
video.src = URL.createObjectURL(source);
source.addEventListener('sourceopen', () => {
const sb = source.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
sb.addEventListener('bufferedchange', (event) => {
const { removedRanges } = event;
for (let i = 0; i < removedRanges.length; i++) {
console.log(`Entfernt: ${removedRanges.start(i).toFixed(2)}s – ${removedRanges.end(i).toFixed(2)}s`);
}
});
});Nachladen, wenn der Browser Daten vor der Abspielposition verwirft
const refetchSegments = async (sb, start, end) => {
// eigene Logik: Segmente für [start, end] erneut laden und anhängen
console.log(`Lade neu: ${start}s bis ${end}s`);
};
const handleBufferedChange = (event) => {
const video = document.querySelector('video');
const { removedRanges } = event;
for (let i = 0; i < removedRanges.length; i++) {
const start = removedRanges.start(i);
const end = removedRanges.end(i);
// Nur relevant, wenn der Bereich noch vor uns liegt
if (end > video.currentTime) {
refetchSegments(event.target, Math.max(start, video.currentTime), end);
}
}
};
// sb ist ein ManagedSourceBuffer
// sb.onbufferedchange = handleBufferedChange;Ereignis manuell erzeugen (z. B. für Tests)
if ('BufferedChangeEvent' in window) {
const video = document.createElement('video');
const event = new BufferedChangeEvent('bufferedchange', {
removedRanges: video.buffered // leeres TimeRanges-Objekt
});
console.log(event.removedRanges.length);
} else {
console.log('BufferedChangeEvent wird nicht unterstützt');
}// Wichtig · Fallstricke
- Kompatibilität: Die Managed Media Source API ist experimentell. Unterstützt wird sie derzeit vor allem von Safari (ab 17, auf dem iPhone ab iOS 17.1). Prüfe deshalb vor der Nutzung mit
'ManagedMediaSource' in windowund greife sonst aufMediaSourcezurück. Dort gibt es keinbufferedchange. - Bei
ManagedMediaSourcekann der Browser gepufferte Daten jederzeit verwerfen. Verlass dich also nicht darauf, dass einmal angehängte Segmente erhalten bleiben. WerteremovedRangesaus und lade fehlende Bereiche nach. - Das
TimeRanges-Objekt ist eine Momentaufnahme. Den aktuellen Pufferzustand liefertsourceBuffer.buffered. - Auf iOS funktioniert
ManagedMediaSourcenur, wenn entwedervideo.disableRemotePlayback = truegesetzt ist oder eine alternative Quelle für AirPlay angegeben wird. Sonst wird die Quelle nicht geöffnet. - Ein Zugriff auf
start(i)oderend(i)mit ungültigem Index wirft einenIndexSizeError.