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();
}
仕様書
Specification |
---|
Media Source Extensions™ # sourcebuffer |
ブラウザーの互換性
BCD tables only load in the browser