MediaSource: addSourceBuffer() メソッド
addSourceBuffer()
は MediaSource
インターフェイスのメソッドで、指定された MIME タイプの新しい SourceBuffer
を作成し、MediaSource
の sourceBuffers
リストに追加します。 新しい SourceBuffer
も返されます。
構文
addSourceBuffer(mimeType)
引数
mimeType
-
文字列で、
MediaSource
に作成して追加するSourceBuffer
の MIME タイプを指定します。
返値
作成され、メディアソースに追加された新しいソースバッファーを表す SourceBuffer
オブジェクト。
例外
InvalidAccessError
DOMException
-
mimeType
に指定された値は、有効な MIME タイプではなく空の文字列です。 InvalidStateError
DOMException
-
MediaSource
のreadyState
は"open"
でありません。 NotSupportedError
DOMException
-
指定された
mimeType
はユーザーエージェントでサポートされていないか、メディアソースのsourceBuffers
リストに既に含まれている他のSourceBuffer
オブジェクトの MIME タイプと互換性がありません。 QuotaExceededError
DOMException
-
ユーザーエージェントはこれ以上
SourceBuffer
オブジェクトを処理できないか、指定されたmimeType
を使用して新しいSourceBuffer
を作成すると、SourceBuffer の構成がサポートされなくなります。
例
次のスニペットは、Nick Desaulniers によって書かれた例からのものです(ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください)。ここでは定義されていませんが、関数 getMediaSource()
は MediaSource
を返します。
const assetURL = "frag_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const mediaSource = getMediaSource();
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
console.log(mediaSource.readyState); // closed
mediaSource.addEventListener("sourceopen", sourceOpen);
video.src = URL.createObjectURL(mediaSource);
} else {
console.error(
"サポートされていない MIME タイプまたはコーデック: ",
mimeCodec,
);
}
function sourceOpen() {
console.log(this.readyState); // open
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, (buf) => {
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
video.play();
console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
}
仕様書
Specification |
---|
Media Source Extensions™ # dom-mediasource-addsourcebuffer |
ブラウザーの互換性
BCD tables only load in the browser