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

ブラウザーの互換性

BCD tables only load in the browser