BufferedChangeEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.
Das BufferedChangeEvent Interface der Media Source Extensions API repräsentiert das Ereignisobjekt für das bufferedchange-Ereignis, das auf einem ManagedSourceBuffer ausgelöst wird. Dieses Ereignis wird immer dann ausgelöst, wenn sich die gepufferten Bereiche des ManagedSourceBuffer ändern, zum Beispiel als Ergebnis von Aufrufen wie appendBuffer(), remove() oder endOfStream(), oder wenn der Benutzeragent den Speicherbereinigungsalgorithmus ausführt.
Konstruktor
BufferedChangeEvent()-
Erstellt und gibt ein neues
BufferedChangeEvent-Objekt zurück.
Instanz-Eigenschaften
Erbt auch Eigenschaften von seinem Eltern-Interface, Event.
BufferedChangeEvent.addedRangesSchreibgeschützt-
Ein
TimeRanges-Objekt, das die Zeitbereiche repräsentiert, die dem Puffer desManagedSourceBufferhinzugefügt wurden. BufferedChangeEvent.removedRangesSchreibgeschützt-
Ein
TimeRanges-Objekt, das die Zeitbereiche repräsentiert, die aus dem Puffer desManagedSourceBufferentfernt wurden.
Beispiele
Umgang mit Änderungen der gepufferten Bereiche
Dieses Beispiel erstellt eine ManagedMediaSource, fügt sie einem <video>-Element hinzu, holt eine fragmentierte MP4-Datei und lauscht auf das bufferedchange-Ereignis. Wenn das Ereignis ausgelöst wird, protokolliert es die hinzugefügten Zeitbereiche.
const videoUrl =
"https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
if (ManagedMediaSource.isTypeSupported(mediaType)) {
const video = document.createElement("video");
const source = new ManagedMediaSource();
video.controls = true;
video.disableRemotePlayback = true;
video.src = URL.createObjectURL(source);
document.body.appendChild(video);
source.addEventListener("sourceopen", async () => {
const sourceBuffer = source.addSourceBuffer(mediaType);
sourceBuffer.addEventListener("bufferedchange", (event) => {
for (let i = 0; i < event.addedRanges.length; i++) {
console.log(
`Added range: ${event.addedRanges.start(i)} - ${event.addedRanges.end(i)}`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Spezifikationen
| Specification |
|---|
| Media Source Extensions™ # dom-bufferedchangeevent |