source 要素

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

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

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

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

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>