ManagedSourceBuffer: bufferedchange Ereignis
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 bufferedchange-Ereignis der ManagedSourceBuffer-Schnittstelle wird ausgelöst, wenn sich der gepufferte Bereich des ManagedSourceBuffer ändert. Dies kann nach einem Aufruf von appendBuffer(), remove(), endOfStream() oder als Folge der Speicherbereinigungsalgorithmus des Benutzeragenten auftreten.
Dieses Ereignis ist wichtig für Anwendungen, die eine ManagedMediaSource verwenden, da der Benutzeragent gepufferte Inhalte jederzeit entfernen kann. Indem Anwendungen auf dieses Ereignis hören, können sie erkennen, wann gepufferte Daten entfernt wurden, und darauf reagieren, indem sie Ersatzsegmente abrufen, um Wiedergabestörungen zu vermeiden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("bufferedchange", (event) => {});
onbufferedchange = (event) => {};
Ereignistyp
Ein BufferedChangeEvent. Erbt von Event.
Ereigniseigenschaften
Zusätzlich zu den unten aufgelisteten Eigenschaften sind die Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.
addedRangesSchreibgeschützt-
Ein
TimeRanges-Objekt, das die Zeitbereiche darstellt, die dem Puffer hinzugefügt wurden. removedRangesSchreibgeschützt-
Ein
TimeRanges-Objekt, das die Zeitbereiche darstellt, die aus dem Puffer entfernt wurden.
Beispiele
Verfolgen von Änderungen im gepufferten Bereich
Dieses Beispiel richtet eine ManagedMediaSource ein, fügt einen Quellpuffer hinzu, ruft eine fragmentierte MP4-Datei ab und hört auf das bufferedchange-Ereignis, um alle Änderungen an den gepufferten Bereichen zu protokollieren.
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 source = new ManagedMediaSource();
const video = document.createElement("video");
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: ${event.addedRanges.start(i)}s - ${event.addedRanges.end(i)}s`,
);
}
for (let i = 0; i < event.removedRanges.length; i++) {
console.log(
`Removed: ${event.removedRanges.start(i)}s - ${event.removedRanges.end(i)}s`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Spezifikationen
| Specification |
|---|
| Media Source Extensions™ # dfn-bufferedchange |