<source src="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | --- |
| 利用場所 | video要素またはaudio要素の子要素として（ただし、track要素やフロー・コンテンツよりも前） / picture要素の子要素として（ただし、img要素よりも前） |
| 内容 | 無し（空要素） |
source要素は、再生候補となるメディアファイル（動画・オーディオ）や、レスポンシブイメージで使用する画像ファイルを指定します。この要素は、video要素、audio要素、picture要素の子要素として使用します。
- video要素、またはaudio要素内で使用する場合と、picture要素内で使用する場合とでは、指定できる属性が異なります。（そのため、以下の内容は2つの項目に分けて解説しています）
<source src="example.mp4" type="video/mp4">
<source src="example.mp3" type="audio/mp3">
<source media="(min-width: 640px)" srcset="medium.jpg">
video要素またはaudio要素の子要素として使用する場合
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
src="" |
動画・オーディオの指定 | URL | 再生候補となる動画またはオーディオファイルのURL |
| 任意属性 | |||
type="" |
動画・オーディオのMIMEタイプ | MIMEタイプ | （同時にコーデック名を指定することも可能） |
source要素を使用することで、video要素またはaudio要素に対して、複数の再生候補（形式の異なる動画・オーディオデータ）を提供することができます。
例えば、video要素内で使用した場合は次のようになります。
<video>
<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">
</video>
上記の例では、3タイプの動画ファイルを指定しています（内容は全て同じ）。このように指定しておくことで、ブラウザ側が対応している形式で再生されるようになります。例えば、MP4形式に対応しているブラウザであれば、example.mp4 が再生されることになります。
- ブラウザが複数の形式に対応している場合は、先に記述されたデータが使用されます。
source要素の配置位置
source要素は、video要素またはaudio要素内の最初の部分（代替コンテンツよりも前）に配置する必要があります。
<video>
<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">
代替コンテンツはsource要素の後に配置します。
</video>
MIMEタイプの指定
メディアファイル（動画・オーディオ）のMIMEタイプを指定しておくと、ブラウザがそのファイルを取得する前に再生可能かどうかを判断できるようになります。（その結果、トラフィックを軽減できるようになります）
次の例では、3つのファイルに対してMIMEタイプを指定しています。この場合、video/mp4 にのみ対応したブラウザでは、example.webm と example.ogv をスキップして example.mp4 のみを取得しようとします。
<video>
<source src="example.webm" type="video/webm">
<source src="example.ogv" type="video/ogg">
<source src="example.mp4" type="video/mp4">
</video>
また、同時にコーデック名を指定することもできます。この情報を指定する場合は、MIMEタイプに続けてcodecsパラメータを記述します。
type='MIMEタイプ; codecs="コーデック名"'
具体的な記述例は次のようになります。
<source src='example.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
- 上記の例では、
avc1.4D401Eが H.264 メインプロファイル、mp4a.40.2が AAC を意味している（？）らしいです。（仕様書に複数の例が紹介されているので、興味のある方はそちらを参考にしてください）
picture要素の子要素として使用する場合
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
srcset="" |
画像の候補 | URL | 画像ファイルのURL（既定の記述子は 1x） |
URL 横幅w |
ビューポートの幅による切り替え： 画像ファイルのURL、幅記述子（w） |
||
URL 比率x |
デバイスピクセル比による切り替え： 画像ファイルのURL、画素密度記述子（x） |
||
| 任意属性 | |||
type="" |
画像のMIMEタイプ | MIMEタイプ | 画像のMIMEタイプを指定 |
media="" |
対象とするメディア | メディアクエリ | 画像の埋め込み対象とするメディアを指定 |
sizes="" |
ブレイクポイント、画像の表示サイズ | メディアクエリ 表示サイズ | メディアクエリ（任意）、画像の表示サイズ（横幅） |
width="" |
 画像の幅 |
数値 | ピクセル数 |
height="" |
画像の高さ |
数値 | ピクセル数 |
- picture要素内でsource要素を使用する場合は、srcset属性の指定が必須となります。
- srcset属性における既定の記述子は
1xとなります。 - srcset属性で画像の横幅（
w）を指定する場合は、sizes属性の指定も必要となります。逆に、デバイスピクセル比（x）を指定する場合はsizes属性は無効となります。 - width属性とheight属性は、候補となる画像の横幅と高さを指定します。この2つの属性は、img要素のwidth属性・height属性の代わりに使用されます。
srcset属性とsizes属性の詳細については、下記のページを参考にしてください。
source要素を使用することで、picture要素に対して複数の画像候補を提供できるようになります。
<picture>
<source media="(min-width: 1280px)" srcset="large.jpg">
<source media="(min-width: 640px)" srcset="medium.jpg">
<img src="small.jpg" alt="サンプル">
</picture>
上記の例では、2種類（img要素を含めると3種類）の画像ファイルを指定しています。このように指定しておくことで、ユーザーの閲覧環境に適した画像が表示されるようになります。
picture要素内で使用するsource要素については、下記のページを参考にしてください。
- 旧HTMLからの変更点
-
- HTML5：source要素が定義されました。
- HTML5.1：picture要素の子要素として使用できるようになりました。
- HTML5.1：srcset属性、sizes属性、media属性が追加されました。
- HTML LS：width属性とheight属性が追加されました。
使用例
- 音が出るのでボリュームにご注意ください。
<audio preload="metadata" controls>
<source src="media/example.aac" type="audio/aac">
<source src="media/example.oga" type="audio/ogg">
<source src="media/example.mp3" type="audio/mpeg">
<p>オーディオを再生することができませんでした。</p>
</audio>
- 表示例