ManagedSourceBuffer
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 ManagedSourceBuffer-Schnittstelle der Media Source Extensions API ist ein SourceBuffer, der von einem ManagedMediaSource erstellt wird, wenn addSourceBuffer() aufgerufen wird. Sie erbt alle Eigenschaften und Methoden von SourceBuffer und löst zusätzlich ein bufferedchange-Ereignis aus, wann immer sich die gepufferten Bereiche ändern – einschließlich wenn der Benutzeragent Inhalte als Teil seines Speicherbereinigungsalgorithmus entfernt.
Anwendungen sollten auf das bufferedchange-Ereignis hören, um Änderungen an gepufferten Daten zu verfolgen, da ein ManagedMediaSource Inhalte jederzeit aus Gründen wie Speicher- oder Hardwarebeschränkungen entfernen kann.
Instanzeigenschaften
Erbt Eigenschaften von seiner übergeordneten Schnittstelle, SourceBuffer.
Instanzmethoden
Erbt Methoden von seiner übergeordneten Schnittstelle, SourceBuffer.
Ereignisse
Erbt auch Ereignisse von seiner übergeordneten Schnittstelle, SourceBuffer.
bufferedchangeExperimentell-
Wird ausgelöst, wenn sich der gepufferte Bereich des
ManagedSourceBufferändert, nach einem Aufruf vonappendBuffer(),remove(),endOfStream()oder als Konsequenz des Speicherbereinigungsalgorithmus des Benutzeragents.
Beispiele
Überwachen von Veränderungen der gepufferten Bereiche
Dieses Beispiel richtet eine ManagedMediaSource ein, fügt einen ManagedSourceBuffer 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`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Spezifikationen
| Spezifikation |
|---|
| Media Source Extensions™ # dom-managedsourcebuffer |