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 つまたは複数のメディアセグメントで構成できます。

インスタンスプロパティ

SourceBuffer.appendWindowEnd: 追加ウィンドウの終わりのタイムスタンプを制御します。
SourceBuffer.appendWindowStart: 追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。これは、SourceBuffer に追加されるメディアデータをフィルタリングするために使用できるタイムスタンプの範囲です。この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。
SourceBuffer.audioTracks 読取専用: SourceBuffer 内に現在含まれている音声トラックのリスト。
SourceBuffer.buffered 読取専用: SourceBuffer に現在バッファーされている時間範囲を返します。
SourceBuffer.mode: SourceBuffer 内のメディアセグメントの順序を、任意の順序で追加できるか、または厳密な順序で保持する必要があるかを制御します。
SourceBuffer.textTracks 読取専用 Experimental: 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() 非標準 Experimental: 指定されたバッファーを SourceBuffer に非同期的に追加するプロセスを開始します。バッファが追加されると満たされる Promise を返します。
SourceBuffer.changeType(): 今後の appendBuffer() の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。
SourceBuffer.remove(): SourceBuffer から特定の時間範囲内のメディアセグメントを削除します。
SourceBuffer.removeAsync() 非標準 Experimental: 指定された範囲のメディアセグメントを 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 によって作成され、ここでライブで見ることができます（さらに調査するためにソースをダウンロードすることもできます）。

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();
}