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.

bufferedchange Experimentell

Wird ausgelöst, wenn sich der gepufferte Bereich des ManagedSourceBuffer ändert, nach einem Aufruf von appendBuffer(), 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

Browser-Kompatibilität

Siehe auch

• ManagedMediaSource
• BufferedChangeEvent
• SourceBuffer
• MediaSource