HTML <source> メディアまたは画像のソース要素
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
<source> は HTML の要素で、<picture>、<audio>、<video> の各要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、すなわち中身も閉じタグもありません。画像ファイル形式やメディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。
試してみましょう
<video controls width="250" height="200" muted>
<source src="/shared-assets/videos/flower.webm" type="video/webm" />
<source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
Download the
<a href="/shared-assets/videos/flower.webm">WEBM</a>
or
<a href="/shared-assets/videos/flower.mp4">MP4</a>
video.
</video>
属性
この要素はすべてのグローバル属性をサポートし、加えて下記の属性を使うことができます。
type-
画像の MIME メディア型またはその他のメディア型で、オプションで
codecs引数を伴います。 src-
メディアのリソースの URL です。この
source要素の親が<audio>および<video>要素の場合は必須ですが、source要素の親が<picture>要素である場合は指定できません。 srcset-
1つ以上の画像のURLと記述子をカンマで区切ったリストです。この
source要素の親が<picture>要素である場合は必須ですが、source要素の親が<audio>または<video>要素の場合は指定できません。文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。
- 画像を指定する 1 つの URL
- 幅記述子。これは正の整数に
"w"を付加した文字列で、例えば300wのようになります。 - 画素密度記述子。これは直後に
"x"を付加した正の浮動小数点数で、例えば2xのようになります。
有効であるためには、リスト内の各文字列は、少なくとも幅記述子またはピクセル密度記述子を持たなければなりません。2 種類の記述子が混在してはならず、リスト全体で一貫して一方のみを使用しなければなりません。リストの中で、各記述子の値は固有でなければなりません。ブラウザーは記述子を基に、指定された時点で表示するために最も適切な画像を選びます。記述子が存在しない場合のデフォルト値は
1xです。sizes属性が存在する場合は、各文字列に対して幅の記述子を指定しなければなりません。ブラウザーがsrcsetに対応していない場合は、