SourceBuffer

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/SourceBuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="211" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SourceBuffer</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

プロパティ

SourceBuffer.appendWindowEnd

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

SourceBuffer.appendWindowStart

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

SourceBuffer.audioTracks 読取専用

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

SourceBuffer.buffered 読取専用

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

SourceBuffer.mode

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

SourceBuffer.textTracks 読取専用

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

SourceBuffer.timestampOffset

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

SourceBuffer.trackDefaults

SourceBuffer に追加されるメディアの初期化セグメント（initialization segment）で、種類、ラベル、言語情報が利用できない場合に使用するデフォルト値を指定します。

SourceBuffer.updating 読取専用

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

SourceBuffer.videoTracks 読取専用

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

イベントハンドラ

SourceBuffer.onabort

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

SourceBuffer.onerror

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

SourceBuffer.onupdate

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

SourceBuffer.onupdateend

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

SourceBuffer.onupdatestart

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

メソッド

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

SourceBuffer.abort()

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

SourceBuffer.appendBuffer()

ArrayBuffer または ArrayBufferView オブジェクトからのメディアセグメントデータを SourceBuffer に追加します。

SourceBuffer.appendBufferAsync()

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

SourceBuffer.appendStream()

ReadableStream オブジェクトからのメディアセグメントデータを SourceBuffer に追加します。

SourceBuffer.changeType()

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

SourceBuffer.remove()

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

SourceBuffer.removeAsync()

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

例

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

var video = document.querySelector('video');

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

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

仕様

ブラウザーの互換性

関連情報

• MediaSource
• SourceBufferList