<source>: メディアまたは画像のソース要素

HTML の <source> 要素は、 <picture> 要素、 <audio> 要素、 <video> 要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、つまり中身も閉じタグもありません。画像ファイル形式メディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。

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

属性

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

media
リソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。
sizes

ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は srcset で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 sizessrcset でピクセル倍率ではなく幅指定子が提供された時 (例えば 2x ではなく 200w の場合) のみ、効果があることに注意してください。

sizes 属性は、 <source> 要素が <picture> 要素の子要素である場合にのみ効果があります。

src
メディアのリソースの場所であり、 <audio> および <video> では必須です。 <picture> 要素の内部にある <source> 要素では、この値は無視されます。
srcset

1つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。

  1. 画像を指定する URL を1つ
  2. 幅記述子。これは正の整数に "w" を付加した文字列で、例えば 300w のようになります。指定しない場合の既定値は無限大です。
  3. 画素密度記述子。これは直後に "x" を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。

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

srcset 属性は、 <source> 要素が <picture> 要素の子要素である場合にのみ効果があります。

type
リソースの MIME メディアタイプ で、オプションで codecs 引数 を伴います。

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

<picture> コンテキストで使用された場合、ブラウザーは <picture> 要素の <img> 子要素で指定された画像は、それぞれの <source> を評価した後で合う画像がなかった場合に使用されます。

使用上のメモ

<source> 要素は空要素、すなわち内容がないだけでなく、終了タグもありません。すなわち、 "</source>" は HTML の中で決して使われません。

ウェブブラウザーが対応している画像形式の詳細と、使用する適切な形式を選択するためのガイダンスについては、ウェブ上で使用する画像ファイルの種類と画像のガイドを参照してください。使用できる動画・音声メディアの種類については、ウェブ上で使用するメディアの種類と形式のガイドを参照してください。

動画の例

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

<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>

その他の例については、学習エリアの記事動画と音声のコンテンツにすばらしいリソースがあります。

図形の例

この例では、2つの <source> 要素が <picture> 内に含まれており、利用可能な空間の大きさがある幅を超えた時に使用する画像のバージョンを提供します。利用可能な幅がこれらの幅よりも小さい場合、ユーザーエージェントは <img> 要素で指定された代替画像を表示します。

<picture> 
   <source srcset="mdn-logo-wide.png" media="(min-width: 800px)">
   <source srcset="mdn-logo-medium.png" media="(min-width: 600px)">
   <img src="mdn-logo-narrow.png" alt="MDN Web Docs">
</picture>

<picture> 要素では、常に一つの <img> 要素をフォールバック画像として、 alt 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
sourceChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 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 完全対応 あり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 完全対応 あり
mediaChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 15IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sizesChrome 完全対応 ありEdge 完全対応 ≤18Firefox 完全対応 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 完全対応 あり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
完全対応 9
部分対応 8
Samsung Internet Android 完全対応 あり
srcChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcsetChrome 完全対応 ありEdge 完全対応 ≤18Firefox 完全対応 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 完全対応 あり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
完全対応 9
部分対応 8
Samsung Internet Android 完全対応 あり
typeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

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

関連情報