MediaSource: addSourceBuffer()-Methode

mimeType

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

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

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.

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.

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);
  });
}

• SourceBuffer
• SourceBufferList