メディアファイルを複数指定するには？
sourceタグの書式
sourceタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
sourceタグの属性一覧
| 属性 | 内容 |
| グローバル属性 | ※グローバル属性のページを参照してください。 |
| src | メディアファイルのパスを指定します。この属性は必須です。 |
| type | メディアファイルのMIMEタイプやコーデックを指定します。 |
| media | 対象とするメディア（デバイス）を指定します。
例えば「screen」（PC画面）、「projection」（プロジェクタ）などが指定できます。
この属性が指定されない場合、「all」（すべてのメディア）として認識されます。 |
sourceタグの解説
<source>タグは、再生するファイル（画像、動画または音声などのメディアファイル）を複数指定するための要素です。
<video>と<audio>の子要素として使用し、<source>単体では使用しません。
<video>や<audio>の子要素に複数の<source>を指定した場合、
ブラウザは記述された<source>順にファイルを読み込み、再生可能であれば再生を行います（それより後の<source>は無視されます）。
1つのメディアをより多くのブラウザに対応させたい場合は、各ブラウザに対応した複数のフォーマットのメディアファイルを用意し、それぞれ<source>に指定するといった使い方をするとよいでしょう。
<source>には終了タグがありません。<source>を指定する場合、開始タグのみを記述します。
sourceタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
<style type="text/css">
.sample {
font-size: 1.2em;
color: gray;
margin: 2px;
}
</style>
</head>
<body>
<header>
<h1>ミュージック再生</h1>
</header>
<section>
<h1 class="sample">ミュージック1</h1>
<audio autoplay controls>
<source src="music1.mp3" type="audio/mp3" media="all">
<source src="music1.wav" type="audio/wav" media="all">
<source src="music1.ogg" type="audio/ogg" media="all">
<p>このブラウザでは音声を再生できません。</p>
</audio>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
sourceタグのサンプル画面1
sourceタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<style type="text/css">
.sample {
font-size: 1.2em;
color: gray;
margin: 2px;
}
</style>
</head>
<body>
<header>
<h1>ビデオ再生</h1>
</header>
<section>
<h1 class="sample">ビデオ1</h1>
<video width="320" height="240" autoplay controls>
<source src="video1.mp4" type="video/mp4" media="all">
<source src="video1.webm" type="video/webm" media="all">
<source src="video1.ogg" type="video/ogg" media="all">
<p>このブラウザではビデオを再生できません。</p>
</video>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
sourceタグのサンプル画面2
sourceタグの関連項目
