MediaSource: Methode addSourceBuffer()

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

Die addSourceBuffer()-Methode der MediaSource-Schnittstelle erstellt ein neues SourceBuffer des angegebenen MIME-Typs und fügt es der sourceBuffers-Liste der MediaSource hinzu. Das neue SourceBuffer wird ebenfalls zurückgegeben.

Syntax

js
addSourceBuffer(mimeType)

Parameter

mimeType

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

Rückgabewert

Ein SourceBuffer-Objekt, das den neuen Quellpuffer darstellt, der erstellt und der Medienquelle hinzugefügt wurde.

Ausnahmen

InvalidAccessError DOMException

Wird ausgelöst, wenn der für mimeType angegebene Wert ein leerer String anstelle eines gültigen MIME-Typs ist.

InvalidStateError DOMException

Wird ausgelöst, wenn die MediaSource nicht im Zustand "open" des readyState ist.

NotSupportedError DOMException

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

QuotaExceededError DOMException

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

Beispiele

Das folgende Snippet stammt aus einem Beispiel von Nick Desaulniers (sehen Sie sich das vollständige Live-Demo an 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