ManagedSourceBuffer
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 ManagedSourceBuffer-Interface der Media Source Extensions API ist ein SourceBuffer, das von einer ManagedMediaSource erstellt wird, wenn addSourceBuffer() aufgerufen wird. Es 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 der Fälle, in denen der User Agent Inhalte im Rahmen seines Speicherbereinigungsalgorithmus entfernt.
Anwendungen sollten auf das bufferedchange-Ereignis hören, um Änderungen an gepufferten Daten zu verfolgen, da eine ManagedMediaSource Inhalte jederzeit aus Gründen wie Speicher- oder Hardwarebeschränkungen entfernen kann.
Instanz-Eigenschaften
Erbt Eigenschaften von seiner Elternschnittstelle, SourceBuffer.
Instanz-Methoden
Erbt Methoden von seiner Elternschnittstelle, SourceBuffer.
Ereignisse
Erbt auch Ereignisse von seiner Elternschnittstelle, SourceBuffer.
bufferedchange-
Wird ausgelöst, wenn sich der gepufferte Bereich des
ManagedSourceBufferändert, nachdem ein Aufruf vonappendBuffer(),remove(),endOfStream(), oder als Folge des Speicherbereinigungsalgorithmus des User Agents erfolgt.
Beispiele
Überwachung von Änderungen der gepufferten Bereiche
Dieses Beispiel richtet eine ManagedMediaSource ein, fügt einen ManagedSourceBuffer hinzu, ruft eine fragmentierte MP4-Datei ab und überwacht 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`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Spezifikationen
| Specification |
|---|
| Media Source Extensions™ # dom-managedsourcebuffer |