HTML の <source> 要素は、 <picture> 要素、 <audio> 要素、 <video> 要素に対し、複数のメディアリソースを指定します。この要素自体は空要素です。この要素は一般的に、同一のメディアコンテンツをそれぞれのブラウザーに対応した複数のメディア形式で提供する場合に用います。

コンテンツカテゴリ なし
許可されている内容 なし。この要素は空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
許可されている親要素
メディア要素(<audio> または <video>)の場合、どの フローコンテンツまたは <track> 要素よりも前に配置する。
<picture> 要素の場合、 <img> 要素より前に配置する。
許可されている ARIA ロール なし
DOM インターフェイス HTMLSourceElement

属性

この要素にはグローバル属性があります。

sizes
source で示した画像が最終的に表示される幅を表す、ソースのサイズのリスト。それぞれのソースのサイズは、条件と長さの組をコンマ区切りで並べたものです。この情報は srcset で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。
sizes 属性は、 <source> 要素が <picture> 要素の子要素である場合にのみ効果があります。
src
メディアのリソースの場所であり、 <audio> 及び <video> では必須です。 <picture> 要素の内部にある <source> 要素では、この値は無視されます。
srcset
1つ以上の文字列をコンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。
  1. 画像の URL を1つ
  2. 幅記述子。これは直後に 'w' を付加した正の整数です。指定しない場合の既定値は無限大です。
  3. 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。

リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内には、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。
ブラウザーは、表示する時点でもっとも適切な画像を選択します。
srcset 属性は、 <source> 要素が <picture> 要素の子要素である場合にのみ効果があります。

type
リソースの MIME タイプ。 必要に応じて codecs 引数も共に指定します。 コーデックの指定方法に関する情報については RFC 4281 を参照してください。
media
リソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。

type 属性が指定されていない場合、サーバーからメディア形式を取得し、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次の <source> をチェックします。 type 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリさえ行わず、次の <source> 要素をチェックします。

次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 audio 要素や video 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 error イベントが発生し、(もしあれば)既定のメディアコントロールがエラーを示します。様々なブラウザーが対応するaudio 及び video 要素が対応するメディア形式の一覧も参照してください。

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg"> 
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

その他の例については、 HTML5 の audio 要素と video 要素の利用のページを参照してください。

仕様書

仕様書 状態 備考
HTML Living Standard
<source> の定義
現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
media
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 15IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sizes
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 38
完全対応 38
完全対応 33
無効
無効 From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari 完全対応 9
完全対応 9
部分対応 7
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 38
完全対応 38
完全対応 33
無効
無効 From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS 完全対応 9.2
完全対応 9.2
部分対応 8
Samsung Internet Android 完全対応 あり
srcChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcset
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 38
完全対応 38
完全対応 33
無効
無効 From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari 完全対応 9
完全対応 9
部分対応 7
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 38
完全対応 38
完全対応 33
無効
無効 From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS 完全対応 9.2
完全対応 9.2
部分対応 8
Samsung Internet Android 完全対応 あり
typeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, RobinEgg
最終更新者: mfuji09,