最終更新日 ![]()
source要素は、video要素やaudio要素に対し、再生対象のメディアリソースを、複数のファイル形式の中から選べるようにします。
HTML5ではvideo要素で動画ファイル、audio要素で音声ファイルの再生を指定できますが、対応しているファイルの形式はブラウザにより異なります。video要素やaudio要素内でsource要素を使うと、再生用のファイルを複数指定できるようになり、ブラウザは複数の選択肢から、再生対象のファイルを選択可能です。ブラウザにより、記述順にファイルがチェックされ、再生可能なファイル形式が見つかるとその時点でファイルの再生が処理されます。source要素自身はコンテンツを持たない空要素で、終了タグはありません。
src属性の指定は必須で、メディアファイルのURLを指定します。
type属性では、メディアファイルの種類をMIMEタイプで指定し、ブラウザが、データを取り込む前に再生可能か判断できるようにします。
media属性は、メディアファイルのメディアタイプを指定します。省略時の既定値は「all」で、そのメディアファイルがすべてのメディアに適していることを示します。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
| なし | 空要素 | video、audio | なし |
| 属性 | 値 | 説明 |
|---|---|---|
| src | URL | メディアファイルのURLを指定します。(必須属性) |
| type | MIMEタイプ | ファイルの種類を指定します。 |
| media | メディアタイプ | メディアの種類を指定します。省略時の初期値は「all」です。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
<body>
<video autoplay controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.ogg" type="video/ogg">
</video>
</body>
『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を1分にギュッと詰め込む動画コンテストです。