HOME
HTMLのsource要素とは？
HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素です。
video要素が「動画を再生する」という枠組みと機能を設置するのに対し、source要素は、その枠の中で「どの動画ファイルを読み込むか」を指定する役割を担っています。
ファイルの指定を各要素のsrc属性で行わずsource要素を用いることで、以下のようなケースに対応することができます。
- レスポンシブデザインへの対応
- 様々な画像（動画）フォーマットへの対応
レスポンシブデザインへの対応
source要素は、特定の画面サイズに一致した場合にのみ、そのファイルが使用されるように指定できます。
PC用に用意した大きなファイルをスマートフォンで表示させようとするとページの読み込みの遅延につながります。
画面サイズごとに適切なサイズのファイルを読み込むようにすれば、どんなデバイスでもスムーズな閲覧が可能になります。
CSSのメディアクエリを用いてPC用画像とスマートフォン用画像の表示非表示を切り替える方法では、両方のファイルを読み込んでしまうのでページ速度の低下を招きます。
様々な画像（動画）フォーマットへの対応
各ブラウザがサポートする動画/音声形式は異なります。
一つのフォーマットのファイルしか用意していなければ、そのフォーマットをサポートしていないブラウザを使ったユーザーは動画が見れません。
そこで、複数のsource要素を使用し異なる形式の動画ファイル（MP4, WebMなど）を指定しておくことで、より多くのブラウザで再生できるようにします。
source要素とその属性
sourceタグを使う場合は、video要素にはsrc属性を記述せず、子要素のsourceタグにファイルパスを指定します。
必須であるsrc属性をはじめ、media属性・type属性を使うことで条件ごとに読み込むファイルを切り替えることができます。
source要素のsrc属性
埋め込むメディアファイル（動画や音声）のURLを指定する属性です。
source要素のmedia属性
どのデバイスや画面サイズでsource要素が適用されるかを指定する属性です。
media属性で指定されたウィンドウサイズの状態でのみ、そのファイルの再生を試みます。
主に、レスポンシブデザインで異なる画面サイズに合わせて画像や動画を切り替える際に使用されます。
source要素のtype属性
動画や音声ファイルのMIMEタイプ（ファイルの種類を特定するための識別子）を指定する属性です。
ブラウザがどの形式のデータを扱っているのかを判断する際に利用され、type属性で指定されたMIMEタイプに対応している場合にのみ、そのファイルの再生を試みます。
source要素の使い方【video要素の場合】
sourceタグはvideoタグの子要素として記述します。
条件によって分岐させて読み込ませたいファイルの数分sourceタグを設置していきます（タグごとに条件とファイルを指定）。
なおsourceタグには閉じタグは不要です。
source要素が読み込まれる順番
source要素を記述するとブラウザは上に記述したsource要素から順に読み込みを試みます。
この時、media属性・type属性に指定した条件を満たしていれば、そのsrc属性に指定したファイルを読み込み、条件が当てはまらなければ次のsource要素の読み込みを試すという処理を繰り返します。
条件を満たしてファイルの読み込んだ場合、それより下のsource要素は無視されます。
末尾にはどれにも該当しなかった場合に表示するファイルを指定しておきます。
下記が実際の記述例です。
HTML
<video width="100%" preload="metadata" controls>
<source media="(min-width:900px)" type="video/mp4" src="sample1.mp4">
<source media="(min-width:600px)" type="video/mp4" src="sample1-tab.mp4">
<source src="sample1-sp.mp4" type="video/mp4">
※Your browser does not support the video tag.
</video>
2行目画面の横幅が900px以上の場合は、PCを想定した「sample1.mp4」を読み込みます。
3行目画面の横幅が900px以下で600px以上の場合は、タブレットを想定した「sample1-tab.mp4」を読み込みます。
4行目画面の横幅がそれ以外（600px以下）の場合は、スマートフォンを想定した「sample1-sp.mp4」を読み込みます。
5行目末尾にはvideo要素に非対応のブラウザの場合に表示するテキストを記述しておきます。
スタイルの指定はvideoに対して行う
source要素にはCSSによるスタイルが適用されません。
デザインを調整したい場合は親であるvideo要素に対してスタイルを設定します。
読み込み後の画面サイズの可変には反応しない？
動作を検証してみた所、video要素ではページが読み込まれたタイミングでのみsourceの切り替えが実行されるようです。
ページ読み込み完了後に画面サイズが動的に変更（PCでブラウザのウィンドウのサイズを狭める等）された場合は、ソースは切り替わらないので注意が必要です。
picture要素とsource要素の組み合わせの場合は、指定した画面サイズを下回ったときに該当するsourceのファイルに切り替わるので、これはvideo要素とsource要素の組み合わせた時の仕様のようです。
まとめ
以上が、video要素とsource要素で画面サイズに応じて読み込む動画ファイルを変更する方法です。
picture要素の子要素にsourceを使う方法については、こちらのページにまとめています。
