HTML Tag Reference

source 要素

選択可能なメディアリソースを複数指定する

source 要素はaudio 要素、video 要素といったメディア要素に対して、選択可能なリソースを複数指定します。

audio 要素、video 要素は、src 属性によって読み込むメディアリソースを指定する事ができますが、この場合はリソースを 1つしか指定することができません。結果、そのフォーマットに対応していない環境では音声や映像ファイルを再生することができません。

そこで、source 要素を使用して、1つの audio 要素、または video 要素に対して複数のリソースを指定し、閲覧者の環境に合わせて選択してもらう事で、様々な環境への対応を可能にします。

また、picture 要素内においては複数のイメージソースを指定するために使用されます。その際、srcset 属性、media 属性、sizes 属性を組み合わせて指定することができます。

source 要素の仕様

カテゴリ: なし
コンテンツモデル: 空
この要素を使用できる文脈: audio 要素または video 要素の子要素として。ただし、すべてのフロー・コンテンツやtrack 要素より前
picture 要素の子要素として。ただし、img 要素の前
この要素で使用できる属性: グローバル属性
src 属性
type 属性
media 属性
srcset 属性
sizes 属性

詳細説明

source 要素に指定可能な属性は下記の通りです。

属性	概要
src 属性	音声、または動画ファイルの URI を指定します。なお、picture 要素内で source 要素が使われる場合、src 属性は使用できません。
type 属性	音声、または動画ファイルの MIME タイプを指定します。
media 属性	音声、または動画ファイルが対応しているメディアタイプを指定します。
srcset 属性	picture 要素内で使用する場合、複数のイメージソースを指定します。picture 要素内で source 要素が使われる場合、srcset 属性は必須となります。
sizes 属性	picture 要素内で使用する場合、複数のイメージソースを出し分けるために指定します。

source 要素のサンプルソース

<!-- source 要素によって 3種類のフォーマットを用意した例 --><audio controls="controls"> <source src="/sample.ogg" type="audio/ogg" /> <source src="/sample.wav" type="audio/wave" /> <source src="/sample.mp4" type="audio/mp4" /> <p>  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。  <a href="/sample.mp3" type="audio/mp3">ファイルのダウンロードはこちら（MP3 / 1.2MB）</a> </p></audio>

<!-- picture 要素内で使用した例 --><picture>  <source srcset="sample-x1.5.png 1.5x, sample-x2.png 2x" />  <img alt="画像の説明" src="sample.png" /></picture>

<!-- picture 要素内で使用した例 --><picture>  <source sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33% - 100px)"          srcset="pic100.jpg 100w, pic200.jpg 200w, pic400.jpg 400w,          pic800.jpg 800w, pic1600.jpg 1600w, pic3200.jpg 3200w" />  <img src="pic400.jpg" alt="画像の説明" /></picture>