Signatur
Beschreibung
Der Konstruktor BufferedChangeEvent() erzeugt eine neue Instanz der Schnittstelle BufferedChangeEvent. Dieses Ereignis gehört zu den Media Source Extensions und wird vom Browser als bufferedchange-Ereignis auf einem ManagedSourceBuffer ausgelöst, sobald sich dessen gepufferte Zeitbereiche ändern. Das passiert zum Beispiel nach einem appendBuffer(), nach einem remove() oder wenn der Browser bei einer ManagedMediaSource selbst Daten verwirft, um Speicher freizugeben.
Normalerweise erzeugt der Browser diese Ereignisse selbst. Den Konstruktor braucht man vor allem für Tests, für Mocks in Player-Bibliotheken oder um in eigenen Abstraktionen synthetische Ereignisse mit derselben Struktur auszulösen.
Das Ereignisobjekt stellt die Nur-Lese-Eigenschaften addedRanges und removedRanges bereit. Beide sind vom Typ TimeRanges. Da sich TimeRanges nicht direkt konstruieren lässt, nimmt man dafür in der Praxis vorhandene Objekte, etwa sourceBuffer.buffered oder video.buffered.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses, unabhängig von Groß- und Kleinschreibung. Vom Browser wird immer "bufferedchange" verwendet. |
|
| $options | Object | {} | Initialisierungsobjekt. Zusätzlich zu den Optionen von Event() (bubbles, cancelable, composed) sind folgende Felder möglich:
TimeRanges. |
Rückgabewert
BufferedChangeEvent-Objekt mit den angegebenen Zeitbereichen.Beispiele
Auf echte bufferedchange-Ereignisse reagieren
const video = document.querySelector('video');
const MS = window.ManagedMediaSource ?? window.MediaSource;
const source = new MS();
video.disableRemotePlayback = true; // für ManagedMediaSource in Safari nötig
video.src = URL.createObjectURL(source);
source.addEventListener('sourceopen', () => {
const sb = source.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
sb.addEventListener('bufferedchange', (event) => {
for (let i = 0; i < event.addedRanges.length; i++) {
console.log(`+ ${event.addedRanges.start(i)}s – ${event.addedRanges.end(i)}s`);
}
for (let i = 0; i < event.removedRanges.length; i++) {
console.log(`- ${event.removedRanges.start(i)}s – ${event.removedRanges.end(i)}s`);
}
});
});Ein synthetisches Ereignis für Tests erzeugen
const video = document.querySelector('video');
// TimeRanges lässt sich nicht direkt erzeugen – vorhandene Objekte verwenden
const event = new BufferedChangeEvent('bufferedchange', {
addedRanges: video.buffered,
removedRanges: video.buffered
});
console.log(event.type);
console.log(event instanceof Event);
console.log(event.addedRanges.length >= 0);Eigenen Handler mit einem Mock-Ereignis prüfen
const target = new EventTarget();
const log = [];
const onBufferedChange = (e) => {
log.push({ added: e.addedRanges.length, removed: e.removedRanges.length });
};
target.addEventListener('bufferedchange', onBufferedChange);
// ohne options → leere TimeRanges
target.dispatchEvent(new BufferedChangeEvent('bufferedchange'));
console.log(log);
target.removeEventListener('bufferedchange', onBufferedChange);// Wichtig · Fallstricke
- Kompatibilität:
BufferedChangeEventgibt es nur zusammen mitManagedMediaSource. Aktuell ist das vor allem Safari 17+ (macOS und iOS/iPadOS). Chrome und Firefox unterstützen es bislang nicht. Deshalb vorher prüfen, z. B. mit'BufferedChangeEvent' in window. TimeRangeshat keinen öffentlichen Konstruktor. FüraddedRangesundremovedRangeslassen sich nur vorhandene Objekte wieelement.bufferedübergeben. Wer eigene Werte an diese Felder übergibt, etwa einfache Arrays oder Objekte, bekommt einenTypeError.- Synthetische Ereignisse ändern den tatsächlichen Puffer nicht. Sie haben
isTrusted === falseund eignen sich daher nur für Tests oder die interne Signalisierung. - Mit
ManagedMediaSourcekann der Browser gepufferte Daten jederzeit selbst verwerfen. Ein Player sollte deshalbremovedRangesauswerten und fehlende Segmente bei Bedarf erneut laden.