<source>の解説|クロノドライブのHTML5辞典

<source>

対応ブラウザ Chrome 3~ / Firefox 3.5~ / Internet Explorer 9~ / Opera 10.5~ / Safari 3.1~ / Android 2.1~ / iOS 3.1~
タグの分類 なし 含められるもの なし(空要素)
使える場所 <video>か<audio>の子要素として、代替コンテンツや<track>要素より前
用例 <audio controls autoplay>
<source src="sample1.mp3" type="audio/mp3">
<source src="sample1.wav" type="audio/wav">
<source src="sample1.ogg" type="audio/ogg">
</audio>

<source>とは

「source」とは、動画や音声などのメディアファイルのURLや種類を指定するためのタグです。<video>要素や<audio>要素内に<source>要素をいくつか記述し、複数のメディアファイル(動画、音声のファイル)を指定することで、複数の再生候補を提示することができます。ユーザーが使用しているブラウザで対応していないフォーマットであっても、<source>要素が記述された順に再生を試みるので、より多くの環境で視聴できる可能性が生まれます。

親の<video>要素や<audio>要素にsrc属性が指定されている場合、<source>要素での指定は無効となります。

<source>要素は<video>要素や<audio>要素の子要素として、<track>要素や代替表示用の内容より先に記述されなければなりません。

src属性には再生するメディアファイルのURLを指定します。

type属性にはMIMEタイプによってメディアファイルの形式やコーデックを指定します。

media属性によって、そのメディアファイルがどの環境向けであるかをメディアクエリで(screen、tv、print、auralなどの値で)指定することができます。これによって、ブラウザなどがそのメディアデータを必要な環境でだけ読み込むというような処理がやりやすくなります。media属性は省略することができ、その場合初期値はall(すべての環境向け)となります。