HTMLMedia​Element​.src​Object

HTMLMediaElement インターフェイスの srcObject プロパティは HTMLMediaElement に関連付けられたメディアソースを提供するオブジェクトを設定または取得します。 このオブジェクトは MediaStreamMediaSourceBlob や(Blobから派生している) File です。

: 2017年11月現在、ブラウザーは MediaStream のみをサポートしています。 MediaSourceBlob、および File の場合は、URL.createObjectURL() を使用して URL を作成し、それを HTMLMediaElement.src に割り当てる必要があります。 例として以下を参照してください。

構文

var sourceObject = HTMLMediaElement.srcObject;

HTMLMediaElement.srcObject = sourceObject;

MediaStreamMediaSourceBlobFile オブジェクト。(実際に何がサポートされているのかは互換性テーブルを確認してください。)

使用上の注意

メディアソース仕様の古いバージョンでは、オブジェクト URL を作成するために createObjectURL() を使用してから、その URL を src に設定する必要がありました。 現在は、MediaStreamsrcObject に直接設定できます。

基本的な例

この例では、メディアソースを新しく作成した <video> 要素に割り当てています。

const mediaSource = new MediaSource();
const video = document.createElement('video');
video.srcObject = mediaSource;

src プロパティへの代替をサポート

上記の例のこのバージョンは、古いバージョンのブラウザーをサポートしています。 それは srcObject をサポートしていない場合に、オブジェクト URL を作成して、それを src に割り当てる必要があります。

const mediaSource = new MediaSource();
const video = document.createElement('video');
// 古いブラウザーは srcObject を持っていないかもしれません。
if ('srcObject' in video) {
  video.srcObject = mediaSource;
} else {
  // これは消えつつあるので、新しいブラウザーで使用しないでください。
  video.src = URL.createObjectURL(mediaSource);
}

仕様

仕様 状態 コメント
HTML Living Standard
srcObject の定義
現行の標準 初回定義。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
srcObjectChrome 部分対応 52
補足
部分対応 52
補足
補足 Currently only supports MediaStream objects.
Edge 部分対応 12
補足
部分対応 12
補足
補足 Currently only supports MediaStream objects.
Firefox 部分対応 一部
補足
部分対応 一部
補足
補足 Currently only supports MediaStream objects.
未対応 18 — 58
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE ? Opera 部分対応 39
補足
部分対応 39
補足
補足 Currently only supports MediaStream objects.
Safari 完全対応 ありWebView Android 部分対応 52
補足
部分対応 52
補足
補足 Currently only supports MediaStream objects.
Chrome Android 部分対応 52
補足
部分対応 52
補足
補足 Currently only supports MediaStream objects.
Firefox Android 部分対応 一部
補足
部分対応 一部
補足
補足 Currently only supports MediaStream objects.
未対応 18 — 58
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 部分対応 41
補足
部分対応 41
補足
補足 Currently only supports MediaStream objects.
Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
部分対応  
部分対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。