MediaSource: addSourceBuffer() メソッド

addSourceBuffer()MediaSource インターフェイスのメソッドで、指定された MIME タイプの新しい SourceBuffer を作成し、MediaSourcesourceBuffers リストに追加します。 新しい SourceBuffer も返されます。

構文

js
addSourceBuffer(mimeType)

引数

mimeType

文字列で、 MediaSource に作成して追加する SourceBuffer の MIME タイプを指定します。

返値

作成され、メディアソースに追加された新しいソースバッファーを表す SourceBuffer オブジェクト。

例外

InvalidAccessError DOMException

mimeType に指定された値は、有効な MIME タイプではなく空の文字列です。

InvalidStateError DOMException

MediaSourcereadyState"open" でありません。

NotSupportedError DOMException

指定された mimeTypeユーザーエージェントでサポートされていないか、メディアソースの sourceBuffers リストに既に含まれている他の SourceBuffer オブジェクトの MIME タイプと互換性がありません。

QuotaExceededError DOMException

ユーザーエージェントはこれ以上 SourceBuffer オブジェクトを処理できないか、指定された mimeType を使用して新しい SourceBuffer を作成すると、SourceBuffer の構成がサポートされなくなります

次のスニペットは、Nick Desaulniers によって書かれた例からのものです(ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください)。ここでは定義されていませんが、関数 getMediaSource()MediaSource を返します。

js
const assetURL = "frag_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./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(
    "サポートされていない MIME タイプまたはコーデック: ",
    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);
  });
}

仕様書

Specification
Media Source Extensions™
# dom-mediasource-addsourcebuffer

ブラウザーの互換性

BCD tables only load in the browser

関連情報