Media Source Extensions API

草案
このページは完成していません。

Media Source Extensions API(MSE、メディアソース拡張機能 API)は、プラグイン不要で Web ベースのストリーミングメディアを可能にする機能を提供します。 MSE を使用すると、メディアストリームを JavaScript で作成し、<audio> 要素 や <video> 要素で再生できます。

Media Source Extensions の概念と使用方法

動画と音声の再生は、Web アプリにおいて、ここ数年間でプラグイン不要で利用可能になりましたが、提供される基本的な機能は、単一トラック全体を再生する場合にのみ有効でした。 例えば、配列バッファを結合/分割することはできません。 RTMP プロトコルを使用して動画ストリームを提供する Flash Media Server などの技術により、ストリーミングメディアは最近まで Flash の領分でした。

MSE 標準

Media Source Extensions(MSE)により、これは変化しています。 MSE を使用すると、メディア要素に渡す通常の単一トラックの src 値を MediaSource オブジェクトへの参照で置き換えることができます。 MediaSource オブジェクトは、再生するメディアの準備状態などの情報のコンテナであり、ストリーム全体を構成するメディアの異なるチャンク(大きな塊)を表す複数の SourceBuffer オブジェクトへの参照です。 MSE を使用すると、コンテンツを取得する量と頻度をよりきめ細かく制御でき、バッファを削除するタイミングなど、メモリ使用量の詳細をある程度制御できます。 拡張可能な API 上に構築される適応的ビットレートストリーミングクライアント(DASH や HLS を使用するクライアントなど)の基礎を築きます。

最新のブラウザーで MSE で動作するアセット(asset、静的コンテンツ)を作成するのは面倒なプロセスであり、かなりの時間、計算能力、エネルギーのすべてを必要とします。 コンテンツを適切な形式にもみほぐす外部ユーティリティの使用が必要です。 MSE を使用したさまざまなメディアコンテナのブラウザーサポートは不完全ですが、H.264 動画コーデック、AAC 音声コーデック、および MP4 コンテナ形式の使用が一般的なベースラインです。 MSE は、コンテナおよびコーデックのサポートの実行時検出用の API も提供します。

時間経過に伴う動画品質、コンテンツの取得速度、またはメモリの削除速度を明示的に制御する必要がない場合は、<video> タグと <source> タグが簡単で適切な解決策になる可能性があります。

DASH

Dynamic Adaptive Streaming over HTTP(DASH、HTTP を介した動的適応的ストリーミング)は、適応的コンテンツの取得方法を指定するためのプロトコルです。 これは、効率的に適応的ビットレートストリーミングクライアントを構築するために MSE の上に構築されたレイヤーです。 HTTP Live Streaming(HLS、HTTP ライブストリーミング)といった他のプロトコルを使用できますが、DASH はほとんどのプラットフォームをサポートしています。

DASH は、多くのロジックをネットワークプロトコルからクライアント側アプリのロジックに移動し、より単純な HTTP プロトコルを使用してファイルを取得します。 実際、単純な静的ファイルサーバーで DASH をサポートでき、CDN にも最適です。 これは、独自で非標準のクライアント/サーバープロトコルの実装に高価なライセンスを必要とした従来のストリーミングの解決策とは正反対です。

DASH の2つの最も一般的な使用例では、コンテンツを「オンデマンド」または「ライブ」で視聴します。 オンデマンドでは、開発者が時間をかけてアセットをさまざまな品質の複数の解像度にトランスコード(transcoding)できます。

ライブプロファイルのコンテンツは、トランスコードとブロードキャストのために遅延を引き起こす可能性があるため、DASH は WebRTC のようなリアルタイム通信には適していません。 ただし、WebRTC よりもかなり多くのクライアント接続をサポートできます。

コンテンツをトランスコードし、DASH、DASH ファイルサーバー、および JavaScript で記述された DASH クライアントライブラリで使用する準備を行うための、無料でオープンソースのツールが多数あります。

インターフェイス

MediaSource
HTMLMediaElement オブジェクトを介して再生されるメディアソースを表します。
SourceBuffer
MediaSource オブジェクトを介して HTMLMediaElement に渡されるメディアのチャンクを表します。
SourceBufferList
複数の SourceBuffer オブジェクトの単純なコンテナリスト。
VideoPlaybackQuality
欠落や破損したフレーム数など、<video> 要素で再生される動画の品質に関する情報が含まれます。 HTMLVideoElement.getVideoPlaybackQuality() メソッドによって返されます。
TrackDefault
メディアチャンクの初期化セグメント(initialization segments)に含まれていないトラックの種類、ラベル、および言語情報の情報を SourceBuffer に提供します。
TrackDefaultList
複数の TrackDefault オブジェクトの単純なコンテナリスト。

他のインターフェイスの拡張

URL.createObjectURL()
MediaSource オブジェクトを指すオブジェクト URL を作成します。 このオブジェクトは、メディアストリームを再生する HTML メディア要素の src 値として指定できます。
HTMLMediaElement.seekable
MediaSource オブジェクトが HTML メディア要素によって再生されると、このプロパティは、ユーザーがシークできる時間範囲を含む TimeRanges オブジェクトを返します。
HTMLVideoElement.getVideoPlaybackQuality()
現在再生されている動画の VideoPlaybackQuality オブジェクトを返します。
AudioTrack.sourceBufferVideoTrack.sourceBufferTextTrack.sourceBuffer
問題のトラックを作成した SourceBuffer を返します。

仕様

仕様 状態 コメント
Media Source Extensions 勧告 初期定義

ブラウザーの互換性

MediaSource インターフェイス

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MediaSource
実験的
Chrome 完全対応 31
完全対応 31
未対応 23 — 31
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 18
完全対応 18
未対応 15 — 18
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 31
完全対応 31
未対応 25 — 31
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Firefox Android 完全対応 41Opera Android 完全対応 18
完全対応 18
未対応 14 — 18
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
完全対応 2.0
未対応 1.5 — 2.0
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報