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

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

属性

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

media

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

sizes

ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は srcset で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 sizes は srcset でピクセル倍率ではなく幅指定子が提供された時 (例えば 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 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。

仕様書

ブラウザーの互換性

関連情報

• ウェブ上のメディアの種類と形式のガイド
• 画像ファイルの型と形式のガイド
• <picture> 要素
• <audio> 要素
• <video> 要素
• ウェブパフォーマンス