メディアリソースの候補を指定する

source要素は、再生候補となるメディアファイル（動画・音声）や、レスポンシブイメージで使用する画像ファイルを指定します。この要素は、video要素、audio要素、picture要素の子要素として使用します。

• video要素、またはaudio要素内で使用する場合と、picture要素内で使用する場合とでは、指定できる属性が異なります。そのため、以下の内容は2つの項目に分けて解説しています。

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.42E01E, mp4a.40.2"'>

• メディアファイルの形式ごとに、対応するコーデック名が存在します。上記の例では、avc1.42E01E が H.264、mp4a.40.2 が AAC を意味している（？）らしいです。（仕様書に複数の例が紹介されているので、興味のある方はそちらを参考にしてください）

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要素については、下記のページを参考にしてください。

• レスポンシブイメージ（画像内容の最適化）