ManagedMediaSource

Das ManagedMediaSource-Interface der Media Source Extensions API ist eine MediaSource, die ihren Speicherinhalt aktiv verwaltet. Im Gegensatz zu einer regulären MediaSource kann der Benutzeragent jederzeit Inhalte aus seinen ManagedSourceBuffer-Objekten entfernen, z.B. aus Gründen wie Speicher- oder Hardwarebeschränkungen. Dies macht sie geeignet für energieeffiziente Streaming-Szenarien, bei denen der Benutzeragent mehr Kontrolle über gepufferte Mediendaten benötigt.

Wenn addSourceBuffer() auf einer ManagedMediaSource aufgerufen wird, erstellt es ManagedSourceBuffer-Objekte (statt SourceBuffer-Objekte), die bufferedchange-Ereignisse auslösen, um die Anwendung zu benachrichtigen, wenn gepufferte Bereiche vom Benutzeragenten geändert werden.

Konstruktor

ManagedMediaSource()

Erstellt und gibt eine neue Instanz des ManagedMediaSource-Objekts zurück, ohne zugehörige Quellenpuffer.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, MediaSource.

ManagedMediaSource.streaming Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob das ManagedMediaSource-Objekt derzeit streamt. Wenn true, sollte die Anwendung aktiv Mediendaten abrufen und anhängen. Wenn false, kann die Anwendung aufhören, neue Daten abzurufen.

Instanz-Methoden

Erbt Methoden von seiner Elternschnittstelle, MediaSource.

Ereignisse

Erbt auch Ereignisse von seiner Elternschnittstelle, MediaSource.

startstreaming

Wird ausgelöst, wenn die streaming-Eigenschaft der ManagedMediaSource von false auf true wechselt, was bedeutet, dass die Medienquelle mit dem Streaming begonnen hat.

endstreaming

Wird ausgelöst, wenn die streaming-Eigenschaft der ManagedMediaSource von true auf false wechselt, was bedeutet, dass die Medienquelle das Streaming beendet hat.

Beispiele

Einrichten einer verwalteten Medienquelle

Das folgende Beispiel richtet eine ManagedMediaSource ein, verbindet sie mit einem <video>-Element und hört auf die startstreaming und endstreaming-Ereignisse, um zu steuern, wann Mediendaten abgerufen werden. bufferedchange-Ereignisse werden unter dem Video protokolliert.

const videoUrl =
 "https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
const video = document.querySelector("video");
if (!window.ManagedMediaSource?.isTypeSupported(mediaType)) {
 console.log("ManagedMediaSource is not supported in this browser.");
} else {
 const source = new ManagedMediaSource();
 video.disableRemotePlayback = true;
 video.src = URL.createObjectURL(source);
 source.addEventListener("sourceopen", () => {
 const sourceBuffer = source.addSourceBuffer(mediaType);
 sourceBuffer.addEventListener("bufferedchange", (event) => {
 for (let i = 0; i < event.addedRanges.length; i++) {
 console.log(
 `Buffered: ${event.addedRanges.start(i).toFixed(2)}s – ${event.addedRanges.end(i).toFixed(2)}s`,
 );
 }
 });
 source.addEventListener("startstreaming", async () => {
 console.log("startstreaming — fetching media data...");
 const response = await fetch(videoUrl);
 const data = await response.arrayBuffer();
 sourceBuffer.appendBuffer(data);
 });
 source.addEventListener("endstreaming", () => {
 console.log("endstreaming — enough data buffered");
 });
 });
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• MediaSource
• ManagedSourceBuffer
• BufferedChangeEvent
• SourceBuffer