SourceBuffer

Limited availability

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

SourceBuffer インターフェイスは、MediaSource オブジェクトを介して HTMLMediaElement に渡されて再生されるメディアのチャンク（大きな塊）を表します。これは、1 つまたは複数のメディアセグメントで構成できます。

EventTarget SourceBuffer

インスタンスプロパティ

SourceBuffer.appendWindowEnd

追加ウィンドウの終わりのタイムスタンプを制御します。

SourceBuffer.appendWindowStart

追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。これは、SourceBuffer に追加されるメディアデータをフィルタリングするために使用できるタイムスタンプの範囲です。この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。

SourceBuffer.audioTracks 読取専用

SourceBuffer 内に現在含まれている音声トラックのリスト。

SourceBuffer.buffered 読取専用

SourceBuffer に現在バッファーされている時間範囲を返します。

SourceBuffer.mode

SourceBuffer 内のメディアセグメントの順序を、任意の順序で追加できるか、または厳密な順序で保持する必要があるかを制御します。

SourceBuffer.textTracks 読取専用

SourceBuffer 内に現在含まれているテキストトラックのリストです。

SourceBuffer.timestampOffset

その後 SourceBuffer に追加されるメディアセグメント内のタイムスタンプに適用されるオフセットを制御します。

SourceBuffer.updating 読取専用

論理値で、SourceBuffer が現在更新されているかどうか、つまり SourceBuffer.appendBuffer() または SourceBuffer.remove() の操作が現在進行中かどうかを示します。

SourceBuffer.videoTracks 読取専用

SourceBuffer 内に現在含まれている動画トラックのリストです。

インスタンスメソッド

親インターフェイスである EventTarget からメソッドを継承しています。

SourceBuffer.abort()

現在のセグメントを中止し、セグメントパーサーをリセットします。

SourceBuffer.appendBuffer()

ArrayBuffer、TypedArray、DataView のいずれかのオブジェクトからのメディアセグメントデータを SourceBuffer に追加します。

SourceBuffer.appendBufferAsync()

指定されたバッファーを SourceBuffer に非同期的に追加するプロセスを開始します。バッファが追加されると満たされる Promise を返します。

SourceBuffer.changeType()

今後の appendBuffer() の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。

SourceBuffer.remove()

SourceBuffer から特定の時間範囲内のメディアセグメントを削除します。

SourceBuffer.removeAsync()

指定された範囲のメディアセグメントを SourceBuffer から非同期的に削除するプロセスを開始します。一致するすべてのセグメントが削除されると満たされる Promise を返します。

イベント

abort

SourceBuffer.appendBuffer() または SourceBuffer.appendStream() が SourceBuffer.abort() の呼び出しによって終了するたびに発生します。 SourceBuffer.updating は true から false に変更されます。

error

SourceBuffer.appendBuffer() 中または SourceBuffer.appendStream() 中にエラーが発生するたびに発生します。 SourceBuffer.updating は true から false に変更されます。

update

SourceBuffer.appendBuffer() メソッドまたは SourceBuffer.remove() が完了するたびに発生します。 SourceBuffer.updating は true から false に変更されます。このイベントは、onupdateend の前に発生します。

updateend

SourceBuffer.appendBuffer() メソッドまたは SourceBuffer.remove() が終了するたびに発生します。このイベントは、onupdate の後に発生します。

updatestart

SourceBuffer.updating の値が false から true に遷移するたびに発生します。

例

次の簡単な例では、動画をチャンクごとに可能な限り高速でロードし、できるだけ早く再生します。この例は Nick Desaulniers によって作成され、ここでライブで見ることができます（さらに調査するためにソースをダウンロードすることもできます）。

js
const video = document.querySelector("video");

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

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  const mediaSource = new MediaSource();
  console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    `${mimeCodec} の MIME タイプまたはコーデックには対応していません`,
    mimeCodec,
  );
}

function sourceOpen() {
  console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = () => {
    cb(xhr.response);
  };
  xhr.send();
}