BufferedChangeEvent
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die BufferedChangeEvent-Schnittstelle 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 von appendBuffer(), remove() oder endOfStream() oder wenn der Benutzeragent den Algorithmus zur Speicherbereinigung ausführt.
Konstruktor
BufferedChangeEvent()Experimentell-
Erstellt und gibt ein neues
BufferedChangeEvent-Objekt zurück.
Instanz-Eigenschaften
Erbt auch Eigenschaften von seiner Elternschnittstelle, Event.
BufferedChangeEvent.addedRangesSchreibgeschützt Experimentell-
Ein
TimeRanges-Objekt, das die Zeitbereiche repräsentiert, die dem Puffer desManagedSourceBufferhinzugefügt wurden. BufferedChangeEvent.removedRangesSchreibgeschützt Experimentell-
Ein
TimeRanges-Objekt, das die Zeitbereiche repräsentiert, die aus dem Puffer desManagedSourceBufferentfernt wurden.
Beispiele
Behandlung von Änderungen der gepufferten Bereiche
Dieses Beispiel erstellt eine ManagedMediaSource, verbindet sie mit einem <video>-Element, ruft eine fragmentierte MP4-Datei ab und lauscht dem 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
| Spezifikation |
|---|
| Media Source Extensions™ # dom-bufferedchangeevent |