MediaSource: addSourceBuffer() メソッド

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

構文

js
addSourceBuffer(mimeType)

引数

mimeType

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

返値

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

例外

InvalidAccessError DOMException

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

InvalidStateError DOMException

MediaSource の readyState は "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

関連情報