ManagedSourceBuffer: bufferedchange Event
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.
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 infolge des Speicherbereinigungsalgorithmus des Benutzeragents geschehen.
Dieses Ereignis ist wichtig für Anwendungen, die eine ManagedMediaSource verwenden, da der Benutzeragent jederzeit gepufferte Inhalte auslagern kann. Indem auf dieses Ereignis gehört wird, können Anwendungen erkennen, wann gepufferte Daten entfernt wurden, und darauf reagieren, indem Ersatzsegmente abgerufen werden, um Wiedergabeunterbrechungen zu vermeiden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("bufferedchange", (event) => {});
onbufferedchange = (event) => {};
Ereignistyp
Ein BufferedChangeEvent. Erbt von Event.
Ereigniseigenschaften
Neben den unten aufgeführten Eigenschaften stehen die Eigenschaften der übergeordneten Schnittstelle Event zur Verfügung.
addedRangesSchreibgeschützt-
Ein
TimeRanges-Objekt, das die Zeitbereiche repräsentiert, die dem Puffer hinzugefügt wurden. removedRangesSchreibgeschützt-
Ein
TimeRanges-Objekt, das die Zeitbereiche repräsentiert, die aus dem Puffer entfernt wurden.
Beispiele
Verfolgung von Änderungen der gepufferten Bereiche
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
| Spezifikation |
|---|
| Media Source Extensions™ # dfn-bufferedchange |