MediaSource - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

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 に取り付けることができます。

EventTarget MediaSource

コンストラクター

MediaSource()

ソースバッファーに関連付けられていない、新しい MediaSource オブジェクトを構築して返します。

インスタンスプロパティ

MediaSource.activeSourceBuffers 読取専用

MediaSource.sourceBuffers に含まれる SourceBuffer オブジェクトのサブセット（選択された映像トラック、有効な音声トラック、表示/非表示のテキストトラックを提供するオブジェクトのリスト）を含む SourceBufferList オブジェクトを返します。

MediaSource.duration

表示されているメディアの再生時間を取得、設定します。

MediaSource.handle 読取専用

専用ワーカーの内部では、 MediaSourceHandle オブジェクトを返します。このオブジェクトは MediaSource のプロキシーで、ワーカーからメインスレッドに移譲して、 HTMLMediaElement.srcObject プロパティを介してメディア要素に取り付けることができます。

MediaSource.readyState 読取専用

現在の状態を表す列挙型を返します。 MediaSource がメディア要素に取り付けられていない状態 (closed)、取り付けられていて SourceBuffer オブジェクトを受け取る準備ができている状態 (open)、または取り付けられているが MediaSource.endOfStream() によってストリームが終了している状態 (ended) のいずれかです。

MediaSource.sourceBuffers 読取専用

この MediaSource に関連付けられた SourceBuffer オブジェクトのリストを格納した SourceBufferList オブジェクトを返します。

静的プロパティ

MediaSource.canConstructInDedicatedWorker 読取専用

論理値です。 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 を返します。

js
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() 呼び出しによって、ワーカーを作成したスレッド（この場合はメインスレッド）に移譲されます。

js
// 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) します。

js
worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});

メモ: MediaSourceHandle は、共有ワーカーまたはサービスワーカーからは正常に移譲できません。

仕様書

Specification

Media Source Extensions™
# mediasource

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年7月22日 by MDN contributors.

View this page on GitHub • Report a problem with this content

メディアソース拡張機能 API
MediaSource
コンストラクター
1. MediaSource()
静的プロパティ
1. canConstructInDedicatedWorker
インスタンスプロパティ
静的メソッド
1. isTypeSupported()
インスタンスメソッド
イベント
継承
1. EventTarget
Media Source Extensions に関連するページ
ガイド
1. メディアソース拡張機能のための資産の形式変換
2. HTML 5 ビデオ用の DASH アダプティブストリーミング