source要素

source要素は、メディア・ファイル（動画ファイルやオーディオ・ファイル）を、ドキュメントへ埋め込む要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト メディア要素（video要素とaudio要素）の子要素として使用できる。ただし、フロー・コンテンツやtrack要素より前に配置する。
コンテンツ・モデル 空。
属性 グローバル属性。
任意属性：src属性、type属性、media属性。
ブラウザ対応

構文

動画

<video>
	<source src="URL" type="MIMEタイプ">
	代替コンテンツ
</video>

source要素のsrc属性に、動画ファイルのURLを指定する。

src属性に指定した動画ファイルが利用できない場合、代替コンテンツを表示する。

MIMEタイプ
  • video/mp4：MP4
  • video/webm：WebM
  • video/ogg：Ogg

オーディオ

<audio>
	<source src="URL" type="MIMEタイプ">
	代替コンテンツ
</audio>

source要素のsrc属性に、オーディオ・ファイルのURLを指定する。

src属性に指定したオーディオ・ファイルが利用できない場合、代替コンテンツを表示する。

MIMEタイプ
  • audio/mp3：MP3
  • audio/wav：Wav
  • audio/ogg：Ogg

要点

  • source要素は、動画ファイルやオーディオ・ファイルを、ドキュメントへ埋め込む要素である。
  • source要素は、MP4、WebM、Oggの動画ファイル形式と、MP3、Wav、Oggのオーディオ・ファイル形式に対応している。ただし、各ブラウザが全てのファイル形式に対応しているわけではない。
  • source要素は、HTML5にて新たに導入された要素である。

ファイル形式別ブラウザ対応

動画

動画ファイル形式 ブラウザ対応
MP4
WebM
Ogg

オーディオ

オーディオ・ファイル形式 ブラウザ対応
MP3
Wav
Ogg

属性

必須属性

属性 説明
src属性 埋め込むファイルのURLを指定する属性。

任意属性

属性 説明
type属性 埋め込むファイルのMIMEタイプを指定する属性。
media属性 対象メディアを指定する属性。

サンプルコード

動画

MP4
<video>
	<source src="sample.mp4" type="video/mp4">
	代替コンテンツ
</video>
WebM
<video>
	<source src="sample.webm" type="video/webm">
	代替コンテンツ
</video>
Ogg
<video>
	<source src="sample.ogg" type="video/ogg">
	代替コンテンツ
</video>

オーディオ

MP3
<audio>
	<source src="sample.mp3" type="audio/mp3">
	代替コンテンツ
</audio>
Wav
<audio>
	<source src="sample.wav" type="audio/wav">
	代替コンテンツ
</audio>
Ogg
<audio>
	<source src="sample.ogg" type="audio/ogg">
	代替コンテンツ
</audio>

サンプル

HTMLソースコード

<p>動画： 
	<video controls style="vertical-align: middle;">
		<source src="sample-video.mp4" type="video/mp4">
		sample-video.mp4を再生できないようです。
	</video>
</p>
<p>オーディオ： 
	<audio controls style="vertical-align: middle;">
		<source src="sample-audio.mp3" type="audio/mp3">
		sample-audio.mp3を再生できないようです。
	</audio>
</p>

実際の表示

動画：

オーディオ：