Media source | Frontend Practical Guide

Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`MediaSource`	31	12	42	8	31	13
`sourceBuffer` AudioTrack の sourceBuffer プロパティは読み取り専用で、トラックを作成した SourceBuffer を返します。トラックが SourceBuffer によって作成されなかった場合、または SourceBuffer がその親メディアソースの MediaSource.sourceBuffers 属性から取り除かれた場合は null を返します。	51	12		8	51	13
`BufferedChangeEvent` 実験的 The BufferedChangeEvent interface of the Media Source Extensions API represents the event object for the ManagedSourceBuffer.bufferedchange_event event fired on a ManagedSourceBuffer. This event is fired whenever the buffered ranges of the ManagedSourceBuffer change, for example as a result of SourceBuffer.appendBuffer, SourceBuffer.remove, or…				17		17.1
`addedRanges` 実験的 BufferedChangeEvent インターフェイスの addedRanges 読み取り専用プロパティは、関連付けられた ManagedSourceBuffer に追加された時間範囲を表す TimeRanges オブジェクトを返します。これらは、コード化フレーム処理アルゴリズムの最新の実行中に、最後の updatestart イベントと updateend イベントの間に追加された範囲です。				17		17.1
`BufferedChangeEvent` 実験的 BufferedChangeEvent インターフェイスの BufferedChangeEvent() コンストラクターは、新しい BufferedChangeEvent オブジェクトインスタンスを作成します。				17		17.1
`removedRanges` 実験的 BufferedChangeEvent インターフェイスの RemoveRanges 読み取り専用プロパティは、関連付けられた ManagedSourceBuffer から削除された時間範囲を表す TimeRanges オブジェクトを返します。これらは、コード化フレーム削除またはコード化フレーム削除アルゴリズムの最新の実行中に、最後の updatestart イベントと updateend イベントの間で削除された範囲です。				17		17.1
`srcObject` srcObject は HTMLMediaElement インターフェイスのプロパティで、 HTMLMediaElement に関連付けられたメディアソースを提供するオブジェクトを設定または取得します。関連付けられていなければ null です。	108	108	42	11	108	11
`activeSourceBuffers` activeSourceBuffers は MediaSource インターフェイスの読み取り専用プロパティで、MediaSource.sourceBuffers に含まれる SourceBuffer オブジェクトのサブセットを含む SourceBufferList オブジェクトを返します。これは、選択した動画トラック、有効な音声トラック、および表示/非表示のテキストトラックを提供するオブジェクトのリストです。	23	12	42	8	25	13
`addSourceBuffer` addSourceBuffer() は MediaSource インターフェイスのメソッドで、指定された MIME typeの新しい SourceBuffer を作成し、MediaSource の MediaSource.sourceBuffers リストに追加します。新しい SourceBuffer も返されます。	23	12	42	8	25	13
`canConstructInDedicatedWorker_static` canConstructInDedicatedWorker は MediaSource インターフェイスの静的プロパティで、 MediaSource ワーカー対応が実装されていれば true を返し、遅延の少ない機能検出メカニズムを提供します。	108	108		18	108	18
`clearLiveSeekableRange` clearLiveSeekableRange() は MediaSource インターフェイスのメソッドで、 MediaSource.setLiveSeekableRange() の呼び出しで以前に設定されたシーク可能な範囲をクリアします。	62	17	50	10.1	62	13
`duration` duration は MediaSource インターフェイスのプロパティで、現在表示されているメディアの期間（長さ）を取得および設定します。	23	12	42	8	25	13
`endOfStream` endOfStream() は MediaSource インターフェイスのメソッドで、ストリームの終わりを通知します。	23	12	42	8	25	13
`handle` handle は MediaSource インターフェイスの読み取り専用プロパティで、 MediaSourceHandle オブジェクトを返します。このオブジェクトは MediaSource のプロキシーであり、専用ワーカーからメインスレッドに戻り、HTMLMediaElement.srcObject プロパティを介してメディア要素に結び付けられます。	108	108		18	108	18
`isTypeSupported_static` MediaSource.isTypeSupported() 静的メソッドは、指定された MIME タイプが現在のuser agentによってサポートされる可能性が高い場合に true となる論理値を返します。	23	12	42	8	25	13
`MediaSource` MediaSource() は MediaSource インターフェイスのコンストラクターで、ソースバッファーが関連付けられていない新しい MediaSource オブジェクトを構築して返します。	31	12	42	8	33	13
`readyState` readyState は MediaSource インターフェイスの読み取り専用プロパティで、現在の MediaSource の状態を表す列挙を返します。 3 つの可能な値は次のとおりです。	23	12	42	8	33	13
`removeSourceBuffer` removeSourceBuffer() は MediaSource インターフェイスのメソッドで、指定された SourceBuffer をこの MediaSource オブジェクトに関連付けられた SourceBufferList リストから削除します。	23	12	42	8	25	13
`setLiveSeekableRange` setLiveSeekableRange() は MediaSource インターフェイスのメソッドで、ユーザーがメディア要素でシークできる範囲を設定します。	62	17	50	10.1	62	13
`sourceBuffers` sourceBuffers は MediaSource インターフェイスの読み取り専用プロパティで、この MediaSource に関連付けられた SourceBuffer オブジェクトのリストを含む SourceBufferList オブジェクトを返します。	23	12	42	8	25	13
`sourceclose_event` sourceclose イベントは、MediaSource オブジェクトの MediaSource.readyState が「closed」に変化すると発生します。これは、MediaSource がメディア要素から切り離されていることを示します。	53	17	87	10.1	53	13
`sourceended_event` sourceended イベントは、MediaSource オブジェクトの MediaSource.readyState が「終了」に変化すると発生します。これは、アプリケーションが MediaSource へのデータの送信を完了したことを示します。アプリケーションは、MediaSource に関連付けられた SourceBuffer オブジェクトへのすべてのメディアデータの追加を完了すると、アプリケーションで MediaSource.endOfStream() メソッドを呼び出します。	53	17	42	10.1	53	13
`sourceopen_event` sourceopen イベントは、MediaSource オブジェクトの MediaSource.readyState が「open」に変化すると発生します。これは、MediaSource が SourceBuffer オブジェクトからデータを受信する準備ができていることを示します。これは、MediaSource オブジェクトが最初にメディア要素にアタッチされたとき、または MediaSource.readyState が「終了」から「オープン」に戻ったときに発生する可能性があります。	53	17	42	10.1	53	13
`worker_support` 実験的労働者で利用可能	108	108			108
`MediaSourceHandle` メディアソース拡張 API の MediaSourceHandle インターフェイスは、専用ワーカーからメインスレッドに転送され、HTMLMediaElement.srcObject プロパティを介してメディア要素にアタッチできる MediaSource のプロキシです。 MediaSource オブジェクトはイベントターゲットであるため転送できないため、MediaSourceHandles が必要です。	108	108		18	108	18
`SourceBuffer` SourceBuffer インターフェイスは、MediaSource オブジェクトを介して HTMLMediaElement に渡されて再生されるメディアのチャンク（大きな塊）を表します。これは、1 つまたは複数のメディアセグメントで構成できます。	31	12	42	8	31	13
`abort` SourceBuffer インターフェイスの abort() メソッドは、現在のセグメントを打ち切り、セグメントパーサーをリセットします。	23	12	42	8	25	13
`abort_event` SourceBuffer.appendBuffer() アルゴリズムの実行中に SourceBuffer.abort() または SourceBuffer.remove() メソッドが呼び出されるために、バッファーの追加が中止されると、SourceBuffer インターフェイスの中止イベントが発生します。 SourceBuffer.updating プロパティは true から false に遷移します。このイベントは…の前に発生します。	53	17	42	10.1	53	13
`abort_event (worker support)` 実験的労働者で利用可能	108	108			108
`abort (worker support)` 実験的労働者で利用可能	108	108			108
`appendBuffer` appendBuffer() は SourceBuffer インターフェイスのメソッドで、ArrayBuffer、TypedArray、DataView のいずれかのオブジェクトからのメディアセグメントデータを SourceBuffer に追加します。	23	12	42	8	33	13
`appendBuffer (worker support)` 実験的労働者で利用可能	108	108			108
`appendWindowEnd` appendWindowEnd は SourceBuffer インターフェイスのプロパティで、追加ウィンドウ（append window）の終わりのタイムスタンプを制御します。タイムスタンプの範囲は、SourceBuffer に追加されるメディアデータをフィルターするために使用できます。この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。	23	12	42	8	33	13
`appendWindowEnd (worker support)` 実験的労働者で利用可能	108	108			108
`appendWindowStart` appendWindowStart は SourceBuffer インターフェイスのプロパティで、追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。タイムスタンプの範囲は、SourceBuffer に追加されるメディアデータをフィルターするために使用できます。この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。	23	12	42	8	33	13
`appendWindowStart (worker support)` 実験的労働者で利用可能	108	108			108
`audioTracks` audioTracks は SourceBuffer インターフェイスの読み取り専用プロパティで、この SourceBuffer 内に現在含まれている音声トラックのリストを返します。	70	12		8	70	13
`audioTracks (worker support)` 実験的労働者で利用可能	108	108			108
`buffered` buffered は SourceBuffer インターフェイスの読み取り専用プロパティで、SourceBuffer に現在バッファーされている時間範囲を正規化された TimeRanges オブジェクトとして返します。	23	12	42	8	33	13
`buffered (worker support)` 実験的労働者で利用可能	108	108			108
`changeType` changeType() は SourceBuffer インターフェイスのメソッドで、今後 SourceBuffer.appendBuffer を呼び出すときに新しいメディアデータが準拠することを期待する MIME タイプを設定します。これにより、コーデックまたはコンテナー型を途中で変更できます。	70	79	63	12.1	70	13
`changeType (worker support)` 実験的労働者で利用可能	108	108			108
`error_event` SourceBuffer インターフェイスのエラーイベントは、SourceBuffer.appendBuffer 操作の処理中にエラーが発生したときに発生します。これは、たとえば、追加されるデータが予期された形式ではない場合、SourceBuffer が無効な状態にある場合、またはユーザーエージェントがデータを処理できない場合に発生する可能性があります。 SourceBuffer.updating プロパティ…	53	17	42	10.1	53	13
`error_event (worker support)` 実験的労働者で利用可能	108	108			108
`mode` mode は SourceBuffer インターフェイスのプロパティで、メディアセグメントを SourceBuffer に任意の順序で追加できるか、厳密な順序で追加できるかを制御します。	23	12	42	8	33	13
`mode (worker support)` 実験的労働者で利用可能	108	108			108
`remove` remove() は SourceBuffer インターフェイスのメソッドで、特定の時間範囲内のメディアセグメントを SourceBuffer から削除します。このメソッドは、SourceBuffer.updating が false の場合にのみ呼び出すことができます。 SourceBuffer.updating が false に等しくない場合、SourceBuffer.abort() を呼び出します。	23	12	42	8	33	13
`remove (worker support)` 実験的労働者で利用可能	108	108			108
`textTracks` 実験的 textTracks は SourceBuffer インターフェイスの読み取り専用プロパティで、SourceBuffer 内に現在含まれているテキストトラックのリストを返します。				8		13
`timestampOffset` timestampOffset は SourceBuffer インターフェイスのプロパティで、SourceBuffer に追加されるメディアセグメント内のタイムスタンプに適用されるオフセットを制御します。	23	12	42	8	33	13
`timestampOffset (worker support)` 実験的労働者で利用可能	108	108			108
`update_event` SourceBuffer インターフェイスの更新イベントは、SourceBuffer.appendBuffer または SourceBuffer.remove 操作が正常に完了したことを通知します。 SourceBuffer.updating 属性は true から false に遷移します。このイベントは、SourceBuffer.updateend_event イベントの前に発生します。	53	17	42	10.1	53	13
`update_event (worker support)` 実験的労働者で利用可能	108	108			108
`updateend_event` SourceBuffer インターフェイスの updateend イベントは、SourceBuffer.appendBuffer または SourceBuffer.remove 操作の完了 (必ずしも成功するとは限りません) を通知します。 SourceBuffer.updating 属性は true から false に遷移します。このイベントは、SourceBuffer.updateevent、SourceBuffer.errorevent、または SourceBuffer.abort_event イベントの後に発生します。	53	17	42	10.1	53	13
`updateend_event (worker support)` 実験的労働者で利用可能	108	108			108
`updatestart_event` SourceBuffer インターフェイスの updatestart イベントは、SourceBuffer.appendBuffer または SourceBuffer.remove 操作の開始を通知します。 SourceBuffer.updating 属性は false から true に遷移します。	53	17	42	10.1	53	13
`updatestart_event (worker support)` 実験的労働者で利用可能	108	108			108
`updating` updating は SourceBuffer インターフェイスの読み取り専用プロパティで、SourceBuffer が現在更新されているかどうか、つまり SourceBuffer.appendBuffer()、SourceBuffer.appendStream()、または SourceBuffer.remove() の操作が現在進行中かどうかを示します。	23	12	42	8	33	13
`updating (worker support)` 実験的労働者で利用可能	108	108			108
`videoTracks` videoTracks は SourceBuffer インターフェイスの読み取り専用プロパティで、現在 SourceBuffer 内に含まれている動画トラックのリストを返します。	70	12		8	70	13
`videoTracks (worker support)` 実験的労働者で利用可能	108	108			108
`SourceBufferList` SourceBufferList インターフェイスは、複数の SourceBuffer オブジェクトの単純なコンテナーリストを表します。	31	12	42	8	31	13
`addsourcebuffer_event` addsourcebuffer`イベント	53	17	42	10.1	53	13
`addsourcebuffer_event (worker support)` 実験的労働者で利用可能	108	108			108
`length` SourceBufferList インターフェイスの length 読み取り専用プロパティは、リスト内の SourceBuffer オブジェクトの数を返します。	23	12	42	8	33	13
`length (worker support)` 実験的労働者で利用可能	108	108			108
`removesourcebuffer_event` removesourcebuffer`イベント	53	17	42	10.1	53	13
`removesourcebuffer_event (worker support)` 実験的労働者で利用可能	108	108			108
`sourceBuffer` TextTrackインターフェイスの読み取り専用のsourceBufferプロパティは、トラックを作成したSourceBufferを返し、トラックがSourceBufferによって作成されていないか、SourceBufferが親メディアソースのMediaSource.sourceBuffers属性から削除されている場合はNULLを返します。				8		13
`sourceBuffer` VideoTrack の sourceBuffer プロパティは読み取り専用で、トラックを作成した SourceBuffer を返します。トラックが SourceBuffer によって作成されなかった場合、または SourceBuffer がその親メディアソースの MediaSource.sourceBuffers 属性から取り除かれた場合は null を返します。	51	12		7	51	13

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const video = document.querySelector('video');
const ms = new MediaSource();
video.src = URL.createObjectURL(ms);
ms.addEventListener('sourceopen', () => {
  const sb = ms.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  fetch('segment.mp4').then(r => r.arrayBuffer()).then(buf => sb.appendBuffer(buf));
});

ライブデモ

Streaming pipeline

Outline how Media Source Extensions build media playback from appended segments.

プレビュー全画面表示

Where MSE helps

Use Media Source when the page needs fine-grained control over buffered media data.

プレビュー全画面表示

Complexity warning

Remember that Media Source is lower-level than ordinary file playback.

プレビュー全画面表示

実務での使いどころ

Media source の活用

MediaSource はメディアソース拡張 API のインターフェイスで、 HTMLMediaElement のメディアデータのソースを表します。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

ライブデモ

Streaming pipeline

Where MSE helps

Complexity warning

実務での使いどころ

Media source の活用

注意点

アクセシビリティ

参考リンク