MediaSource
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
MediaSource はメディアソース拡張 API のインターフェイスで、 HTMLMediaElement のメディアデータのソースを表します。 MediaSource オブジェクトはユーザーエージェント内で再生される HTMLMediaElement に取り付けることができます。
コンストラクター
MediaSource()-
ソースバッファーに関連付けられていない、新しい
MediaSourceオブジェクトを構築して返します。
インスタンスプロパティ
MediaSource.activeSourceBuffers読取専用-
MediaSource.sourceBuffersに含まれるSourceBufferオブジェクトのサブセット（選択された映像トラック、有効な音声トラック、表示/非表示のテキストトラックを提供するオブジェクトのリスト）を含むSourceBufferListオブジェクトを返します。 MediaSource.duration-
表示されているメディアの再生時間を取得、設定します。
MediaSource.handle読取専用 Experimental-
専用ワーカーの内部では、
MediaSourceHandleオブジェクトを返します。このオブジェクトはMediaSourceのプロキシーで、ワーカーからメインスレッドに移譲して、HTMLMediaElement.srcObjectプロパティを介してメディア要素に取り付けることができます。 MediaSource.readyState読取専用-
現在の状態を表す列挙型を返します。
MediaSourceがメディア要素に取り付けられていない状態 (closed)、取り付けられていてSourceBufferオブジェクトを受け取る準備ができている状態 (open)、または取り付けられているがMediaSource.endOfStream()によってストリームが終了している状態 (ended) のいずれかです。 MediaSource.sourceBuffers読取専用-
この
MediaSourceに関連付けられたSourceBufferオブジェクトのリストを格納したSourceBufferListオブジェクトを返します。
静的プロパティ
MediaSource.canConstructInDedicatedWorker読取専用 Experimental-
論理値です。
MediaSourceのワーカー対応が実装されていればtrueを返し、レイテンシーの低い機能検出メカニズムを提供します。
インスタンスメソッド
親インターフェイスEventTargetから、プロパティを継承しています。
MediaSource.addSourceBuffer()-
新しい
SourceBufferを指定された MIME タイプで作成し、MediaSource.sourceBuffersリストに追加します。 MediaSource.clearLiveSeekableRange()-
setLiveSeekableRange()を呼び出して設定したシーク可能範囲をクリアします。 MediaSource.endOfStream()-
ストリームの終わりを合図します。
MediaSource.removeSourceBuffer()-
メディアソースオブジェクトから、与えられた
SourceBufferを除去します。 MediaSource.setLiveSeekableRange()-
ユーザーがこのメディア要素でシークできる範囲を設定します。
静的メソッド
MediaSource.isTypeSupported()-
論理値で、指定された MIME タイプに現在のユーザーエージェントが対応しているかどうか、つまり、その MIME タイプの
SourceBufferオブジェクトを正常に作成できるかどうかを返します。
イベント
sourceclose-
MediaSourceインスタンスがメディア要素に取り付けられなくなったときに発行されます。 sourceended-
MediaSourceインスタンスがまだメディア要素に取り付けられているが、endOfStream()が呼び出された時に発行されます。 sourceopen-
MediaSourceインスタンスがメディア要素によって開かれ、sourceBuffers内のSourceBufferオブジェクトにデータを追加する準備ができたときに発行されます。
例
完全に基本的な例
次の単純な例は、XMLHttpRequest で動画を読み込んで、できるだけ早く再生します。この例は Nick Desaulniers によって書かれたもので、ここでライブ表示 することができます（さらに調べるために ソースをダウンロードする こともできます）。ここでは定義されていませんが、関数 getMediaSource() は MediaSource を返します。
const video = document.querySelector("video");
const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
let mediaSource;
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
mediaSource = getMediaSource();
console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
console.error("Unsupported MIME type or codec: ", 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);
});
}
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();
}
専用のワーカーで MediaSource を構築し、メインスレッドに渡す
handle プロパティは、専用ワーカーの内部でアクセスすることができ、結果 MediaSourceHandle オブジェクトは、 postMessage() 呼び出しによって、ワーカーを作成したスレッド（この場合はメインスレッド）に移譲されます。
// Inside dedicated worker
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// Transfer the handle to the context that created the worker
postMessage({ arg: handle }, [handle]);
mediaSource.addEventListener("sourceopen", () => {
// Await sourceopen on MediaSource before creating SourceBuffers
// and populating them with fetched media — MediaSource won't
// accept creation of SourceBuffers until it is attached to the
// HTMLMediaElement and its readyState is "open"
});
メインスレッドでは、message イベント ハンドラーを介してハンドルを受け取り、 <video> に HTMLMediaElement.srcObject プロパティを介して取付、動画を再生 (play) します。
worker.addEventListener("message", (msg) => {
let mediaSourceHandle = msg.data.arg;
video.srcObject = mediaSourceHandle;
video.play();
});
メモ:
MediaSourceHandle は、共有ワーカーまたはサービスワーカーからは正常に移譲できません。
仕様書
| Specification |
|---|
| Media Source Extensions™ # mediasource |
ブラウザーの互換性
Loading…