<source>要素

<source>要素の定義

英語で「源泉」を表す、”source”より。
HTML文書では、 <picture> 要素、 <audio> 要素、 <video> 要素に対し、複数のメディアリソースを指定します。
一般的には同一のメディアコンテンツをそれぞれのブラウザに対応した複数の形式で提供する場合に使用します。

子要素として使用できるもの

空要素なので、子要素は使用できません。

親要素として使えるもの

<audio>、<video>、<picture> の各要素。
<audio> または <video> 要素の場合は、どのフローコンテンツや <track> 要素よりも前に配置する必要があります。
<picture> 要素の場合、 <img> 要素より前に配置する必要があります。

許可されているARIAロール

なし

DOMインターフェース

HTMLSourceElement

属性

グローバル属性が指定できます。

media

リソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。

sizes

ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をコンマ区切りで並べたものです。この情報は srcset で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 sizes は srcset でピクセル倍率ではなく幅指定子が提供された時 (例えば 2x ではなく 200w の場合) のみ、効果があることに注意してください。
sizes 属性は、 <source> 要素が <picture> 要素の子要素である場合にのみ効果があります。

src

メディアのリソースの場所であり、 <audio> および <video> では必須です。 <picture> 要素の内部にある <source> 要素では、この値は無視されます。

srcset

1つ以上の文字列をコンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。

1. 画像の URL を1つ
2. 幅記述子。これは直後に ‘w’ を付加した正の整数です。指定しない場合の既定値は無限大です。
3. 画素密度記述子。これは直後に ‘x’ を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。

リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内には、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。
ブラウザーは、表示する時点でもっとも適切な画像を選択します。
srcset 属性は、 <source> 要素が <picture> 要素の子要素である場合にのみ効果があります。

type

リソースの MIME タイプ。 必要に応じて codecs 引数も共に指定します。
 

サンプル

See the Pen 画像切り替え by Masahiko Iwakiri (@m-iwakiri) on CodePen.