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

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

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

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

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

source 要素の仕様

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

詳細説明

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>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.8.2 The source element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ