HyperText Markup Language source element.
source要素は、video要素や audio要素で再生するメディア・ファイルを指定するために使います。video要素や audio要素の src属性では、メディア・ファイルを 1つしか指定できませんが、source要素を使うことで、複数のメディア・ファイルを指定することができるようになります。
source要素は、video要素と audio要素のメディア要素の中でしか使うことができませんので、注意してください。
source要素では、src属性を使って、メディア・ファイルの URLを指定します。src属性は必須です。
audio要素のマークアップ例
<audio controls="controls">
<source src="sample.ogg" type="audio/ogg" />
<source src="sample.aac" type="audio/aac" />
<source src="sample.mp3" type="audio/mp3" />
<p>ご利用のブラウザでは再生できません。<a href="sample.mp3">こちら</a>からダウンロードして下さい。</p>
</audio>
source要素を複数指定したとしても、すべてが再生されるわけではありません。上から順にチェックされ、最初に再生可能と判断されたものだけが、実際に再生されることになります。前述の例を Safariでアクセスすると、最初の sample.ogg は無視され、その次の sample.aac が採用されることになります。Internet Explorerのように、メディア要素に対応していないブラウザの場合は、source要素は全て無視され、その後ろにマークアップされたコンテンツが表示されることになります。
type属性には、メディア・ファイルの MIMEタイプを指定します。このコンテンツ属性は必須ではありませんが、ブラウザが事前に再生可能かどうかを判別するためのヒントにもなりますので、入れておいたほうが良いでしょう。
通常は、video/mp4や audio/oggといった表記が使われますが、さらに詳細に、コーデックを指定する表記も許されています。その場合は、video/mp4といった表記の直後にセミコロンを入れ、その次に codecs= を使ってコーデックの種類を表記します。ここでは、HTML5仕様で紹介されているタイプをご紹介しましょう。
| 映像 | 音声 | コンテナ | マークアップ |
|---|---|---|---|
| H.264シンプル・ベースライン・プロファイルレベル3 | Low-ComplexityAAC | MP4 | <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> |
| H.264拡張プロファイルレベル3 | Low-ComplexityAAC | MP4 | <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'> |
| H.264メイン・プロファイルレベル3 | Low-ComplexityAAC | MP4 | <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> |
| H.264ハイ・プロファイルレベル3 | Low-ComplexityAAC | MP4 | <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'> |
| MPEG-4ビジュアル・シンプル・プロファイルレベル0 | Low-ComplexityAAC | MP4 | <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'> |
| MPEG-4アドバンスド・シンプル・プロファイルレベル0 | Low-ComplexityAAC | MP4 | <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'> |
| MPEG-4ビジュアル・シンプル・プロファイルレベル0 | AMR | 3GPP | <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'> |
| Theora | Vorbis | Ogg | <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'> |
| Theora | Speex | Ogg | <source src='video.ogv' type='video/ogg; codecs="theora, speex"'> |
| - | Vorbis | Ogg | <source src='audio.ogg' type='audio/ogg; codecs=vorbis'> |
| - | Speex | Ogg | <source src='audio.spx' type='audio/ogg; codecs=speex'> |
| - | FLAC | Ogg | <source src='audio.oga' type='audio/ogg; codecs=flac'> |
| Dirac | Vorbis | Ogg | <source src='video.ogg' type='video/ogg; codecs="dirac, vorbis"'> |
| Theora | Vorbis | Matroska | <source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'> |
media属性は、source要素を、スクリーンやテレビなどの特定のメディアだけに適用したい場合に使います。style要素の media属性と使い方は同じです。
media属性のマークアップ例
<video controls="controls">
<source src="theora_vorbis.ogg" type="video/ogg" media="screen" />
<source src="h264_aac.mp4" type="video/mp4" media="tv" />
<p>ご利用のブラウザでは再生できません。<a href="h264_aac.mp4">こちら</a>からダウンロードして下さい。</p>
</video>
この例では、通常のパソコン向けには theora_vorbis.ogg が、テレビ向けには h264_aac.mp4 が優先されることになります。
source {
display: none;
}