MediaSource: addSourceBuffer()-Methode

Hinweis: Dieses Feature ist verfügbar in Dedicated Web Workers.

Die addSourceBuffer()-Methode der MediaSource-Schnittstelle erstellt einen neuen SourceBuffer des angegebenen MIME-Typs und fügt ihn der sourceBuffers-Liste der MediaSource hinzu. Der neue SourceBuffer wird ebenfalls zurückgegeben.

Syntax

js
addSourceBuffer(mimeType)

Parameter

mimeType

Ein String, der den MIME-Typ des zu erstellenden und zur MediaSource hinzuzufügenden SourceBuffer angibt.

Rückgabewert

Ein SourceBuffer-Objekt, das den neu erstellten und zur Mediensource hinzugefügten Source Buffer darstellt.

Ausnahmen

InvalidAccessError DOMException

Wird ausgelöst, wenn der für mimeType angegebene Wert ein leerer String ist und kein gültiger MIME-Typ.

InvalidStateError DOMException

Wird ausgelöst, wenn sich die MediaSource nicht im "open" readyState befindet.

NotSupportedError DOMException

Wird ausgelöst, wenn der angegebene mimeType vom User Agent nicht unterstützt wird oder nicht mit den MIME-Typen anderer SourceBuffer-Objekte kompatibel ist, die bereits in der sourceBuffers-Liste der Mediensource enthalten sind.

QuotaExceededError DOMException

Wird ausgelöst, wenn der User Agent keine weiteren SourceBuffer-Objekte verarbeiten kann oder wenn die Erstellung eines neuen SourceBuffer mit dem angegebenen mimeType zu einer nicht unterstützten Konfiguration von SourceBuffern führen würde.

Beispiele

Das folgende Snippet stammt aus einem einfachen Beispiel von Nick Desaulniers (sehen Sie die vollständige Demo live oder laden Sie den Quellcode herunter für weitere Untersuchungen). Die Funktion getMediaSource(), die hier nicht definiert ist, gibt eine MediaSource zurück.

js
const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const mediaSource = getMediaSource();

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  console.log(mediaSource.readyState); // closed
  mediaSource.addEventListener("sourceopen", sourceOpen);
  video.src = URL.createObjectURL(mediaSource);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

Spezifikationen

Specification
Media Source Extensions™
# dom-mediasource-addsourcebuffer

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch