SourceBuffer

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

プロパティ

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.updatingtrue から false に変更されます。
SourceBuffer.onerror
SourceBuffer.appendBuffer() 中または SourceBuffer.appendStream() 中にエラーが発生するたびに発生します。 SourceBuffer.updatingtrue から false に変更されます。
SourceBuffer.onupdate
SourceBuffer.appendBuffer() メソッドまたは SourceBuffer.remove() が完了するたびに発生します。 SourceBuffer.updatingtrue から false に変更されます。 このイベントは、onupdateend の前に発生します。
SourceBuffer.onupdateend
SourceBuffer.appendBuffer() メソッドまたは SourceBuffer.remove() が終了するたびに発生します。 このイベントは、onupdate の後に発生します。
SourceBuffer.onupdatestart
SourceBuffer.updating の値が false から true に遷移するたびに発生します。

メソッド

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

SourceBuffer.abort()
現在のセグメントを中止し、セグメントパーサーをリセットします。
SourceBuffer.appendBuffer()
ArrayBuffer (en-US) または ArrayBufferView (en-US) オブジェクトからのメディアセグメントデータを SourceBuffer に追加します。
SourceBuffer.appendBufferAsync() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
指定されたバッファを SourceBuffer に非同期的に追加するプロセスを開始します。 バッファが追加されると満たされる Promise を返します。
SourceBuffer.appendStream()
ReadableStream オブジェクトからのメディアセグメントデータを SourceBuffer に追加します。
SourceBuffer.changeType()
今後の appendBuffer() の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。
SourceBuffer.remove()
SourceBuffer から特定の時間範囲内のメディアセグメントを削除します。
SourceBuffer.removeAsync() これは実験段階の API です。製品内のコードで使用しないようご注意ください。
指定された範囲のメディアセグメントを 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();
}

仕様

仕様 状態 コメント
Media Source Extensions
SourceBuffer の定義
勧告 初期定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報