MediaSource: addSourceBuffer() メソッド

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
addSourceBuffer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

関連情報