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

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

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

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

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

さらに詳細な説明を見る

サンプルソースを見る

source 要素の仕様

カテゴリ
  • なし
コンテンツモデル
この要素を使用できる文脈
  • audio 要素または video 要素の子要素として。ただし、すべてのフロー・コンテンツや track 要素より前。
  • picture 要素の子要素として。img 要素の前に。
この要素で使用できる属性
DOM インタフェース
interface HTMLSourceElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString media;
};

//picture 要素内で使用した場合
partial interface HTMLSourceElement {
           attribute DOMString srcset;
           attribute DOMString sizes;
           attribute DOMString media;
};

詳細説明

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

属性 概要
src 属性 音声、または動画ファイルの URI を指定します。
type 属性 音声、または動画ファイルの MIME タイプを指定します。
media 属性 音声、または動画ファイルが対応しているメディアタイプを指定します。
srcset 属性 picture 要素内で使用する場合、複数のイメージソースを指定します。
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>

W3C HTML5 仕様書

4.8.8 The source element