MediaSource: Methode addSourceBuffer()

mimeType

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

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

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.

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.

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