cman.jpWEBページ作成
広告
<source> 「動画、音声のリソース再生候補」[読み方：ソース]
<source>タグは、<audio>タグや<video>タグのリソース再生候補を指定します。
2013年4月時点では、ブラウザにより使用できるファイル属性（拡張子）が異なりますので注意が必要です。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<source>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<source> の仕様
<source> の属性
【構文】
<source src="動画、音声ファイル" type="MIMEタイプ" media="メディア">
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| src="動画、音声ファイル名" | 親要素が<audio>、<video>の場合、 動画、音声のファイル名【必須】 |
「sample.mp4」 「sample.webm」 「sample.ogg」 「sample.mp3」など 拡張子：「.mp4」「.ogv」「.webm」「.mp3」「.ogg」「m4a」 |
| type="MIMEタイプ" | 動画、音声ファイルのMIMEタイプ | 「video/webm」 |
| media="メディアタイプ" | 動画、音声ファイルを適用するメディアタイプ ※デフォルト＝all | 「screen」 「print」 |
| srcset="画像ファイル名" | 親要素が<picture>の場合、 画像のファイル名【必須】 ※HTML5以降に追加 |
画像のURL |
| sizes="画像サイズ" | 親要素が<picture>の場合、 画像サイズ ※HTML5以降に追加 | |
| width="幅" | 親要素が<picture>の場合、 画像の幅（ピクセル値） ※HTML5以降に追加 | "200" |
| height="高さ" | 親要素が<picture>の場合、 画像の高さ（ピクセル値） ※HTML5以降に追加 | "200" |
| グローバル属性 |
| |
| イベント属性 |
| |
<source>タグのサンプル
「audio」のサンプル
<audio controls>
<source src="se_maoudamashii_onepoint03.mp3"type="audio/mp3">
<source src="se_maoudamashii_onepoint04.ogg"type="audio/ogg">
<p style="color:red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>
<source src="se_maoudamashii_onepoint03.mp3"type="audio/mp3">
<source src="se_maoudamashii_onepoint04.ogg"type="audio/ogg">
<p style="color:red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>
「video」のサンプル
<video autoplay controls width="300"height="250">
<source src="e23.webm" type="video/webm">
<source src="e23.mp4" type="video/mp4">
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>
<source src="e23.webm" type="video/webm">
<source src="e23.mp4" type="video/mp4">
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>
動画：kawacho様よりダウンロードし利用させていただいています。
留意事項
広告