<source>動画・音声リソースのアドレスを指定

<source>タグは、<video><audio>内で、複数の動画や音声ファイルを指定するために使用します。 <source>自身は何も出力しません。

通常、video要素やaudio要素では、一つのメディアファイルしか指定することができません。 ですがブラウザによっては、そのファイルが再生できない場合もあります。 こういった場合に<source>を使用し、再生候補として複数のメディアファイルを指定します。

ブラウザは<source>が記述された順番(上から順)に読み込み、再生可能なファイルを再生します。 再生可能なファイルがない場合は、それ以降の要素がフォールバック(代替コンテンツ)として表示されます。

src属性でメディアファイルのurlを指定し、type属性でそのメディアファイルのMIMEタイプを指定します。 MIMEタイプを指定するとブラウザがそのメディアファイルを取得する前に、再生可能か判断できるため、トラフィックを軽減することができます。 また「type'MIMEタイプ; codecs"コーデック名"'」のようにcodecsパラメータを指定する事でコーデックを明示することもできます。

media属性では、そのメディアファイルが対象としているメディアタイプを指定します。 属性値はメディアクエリである事が必要ですが、省略した場合の値はallとなります。

HTML5での変更点

source要素は、HTML5から追加されました。 HTML5.1では、srcset属性、sizes属性、media属性が追加され、picture要素の子要素しても利用できます。

書式

  • <source 属性="値"> ……… 動画・音声リソースのアドレスを指定

属性

src="url" 動画・音声など、メディアファイルのアドレスを指定
type="" メディアファイルのMIMEタイプを指定
media="" ファイルのメディアタイプを指定

使用した時の例

<audio controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.ogg" type="audio/ogg">
<source src="sample.m4a" type="audio/aac">
<p>このブラウザでは音声を再生できません。</p>
</audio>

対応ブラウザなどのデータ

形式 <source src=""> カテゴリ なし
親要素 audio, video 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~