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.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
(en-US) オブジェクトからのメディアセグメントデータをSourceBuffer
に追加します。SourceBuffer.appendBufferAsync()
Experimental- 指定されたバッファを
SourceBuffer
に非同期的に追加するプロセスを開始します。 バッファが追加されると満たされるPromise
を返します。 SourceBuffer.appendStream()
ReadableStream
オブジェクトからのメディアセグメントデータをSourceBuffer
に追加します。SourceBuffer.changeType()
- 今後の
appendBuffer()
の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。 SourceBuffer.remove()
SourceBuffer
から特定の時間範囲内のメディアセグメントを削除します。SourceBuffer.removeAsync()
Experimental- 指定された範囲のメディアセグメントを
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