MediaSource.addSourceBuffer()

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

構文

var sourceBuffer = mediaSource.addSourceBuffer(mimeType);

パラメーター

mimeType

MediaSource に作成して追加する SourceBuffer の MIME タイプを指定する DOMString。

戻り値

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

例外

InvalidAccessError

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

InvalidStateError

MediaSource の readyState は "open" でありません。

NotSupportedError

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

QuotaExceededError

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

例

次のスニペットは、Nick Desaulniers によって書かれた簡単な例からのものです（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。

js

var assetURL = "frag_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    "サポートされていない MIME タイプまたはコーデック: ",
    mimeCodec,
  );
}

function sourceOpen(_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", function (_) {
      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

関連情報