ManagedSourceBuffer: bufferedchange-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
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() oder endOfStream() geschehen oder dadurch, dass der User Agent den Algorithmus zur Speicherbereinigung ausführt.
Dieses Ereignis ist für Anwendungen wichtig, die eine ManagedMediaSource verwenden, da der User Agent gepufferte Inhalte jederzeit verwerfen kann. Indem Anwendungen auf dieses Ereignis reagieren, können sie erkennen, wann gepufferte Daten entfernt wurden, und Ersatzsegmente abrufen, um Unterbrechungen bei der Wiedergabe zu vermeiden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("bufferedchange", (event) => {});
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onbufferedchange = (event) => {};
Ereignistyp
Ein BufferedChangeEvent. Erbt von Event.
Beispiele
Änderungen der gepufferten Bereiche verfolgen
Dieses Beispiel richtet eine ManagedMediaSource ein, fügt einen Source Buffer hinzu, ruft eine fragmentierte MP4-Datei ab und reagiert auf das bufferedchange-Ereignis, um Ä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 |