HTML <ソース>タグ
例
2つのソースファイルを備えたオーディオプレーヤー。ブラウザは、サポートする最初の<source>を選択します。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このタグは、 <video>、<audio>、<picture><source>などのメディア要素に複数のメディアリソースを指定するために使用されます
。
この<source>タグを使用すると、ブラウザのサポートまたはビューポートの幅に基づいて、ブラウザが選択できる代替のビデオ/オーディオ/画像ファイルを指定できます。ブラウザは、<source>
サポートする最初のものを選択します。
ブラウザのサポート
表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
属性
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
グローバル属性
この<source>タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<source>タグは、HTMLのイベント属性もサポートしています。
その他の例
例
<video>内の<source>を使用して、ビデオを再生します。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
例
<picture>内の<source>を使用して、ビューポートの幅に基づいてさまざまな画像を定義します。
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
関連ページ
HTMLチュートリアル：HTMLビデオ
HTMLチュートリアル：HTMLオーディオ
HTML DOMリファレンス：ソースオブジェクト
デフォルトのCSS設定
なし。