source要素は複数のメディアファイルを指定できる【HTML】

音声や動画ファイルを扱うaudio要素、video要素などではsrc属性でファイルのURLを指定しますが、source要素を使えば、複数のメディアファイルのURLを指定することができます。

source要素を使うことにどのようなメリットがあるのかというと、複数のメディアファイルを用意しておけば、ユーザーの環境に合ったファイルが選択されるので、見れないとか再生されないといった可能性が減ります。

source要素で使える属性

source要素では以下のような属性が使えます。

• src（ソース）
• srcset（ソースセット）
• type（タイプ）
• media（メディア）

src（ソース）

audio要素やvideo要素で指定しない代わりに、source要素のsrc属性で埋め込む音声や動画ファイルのURLを指定します。

srcset（ソースセット）

img要素と同様に、srcset属性で複数のイメージソースを指定できます。

複数のイメージソースを指定することで、ディスプレイのサイズやデバイスピクセル比によって画像を切り替えたりすることができます。

たとえば上のように指定することができます。

src属性で指定している分「example.png」が通常時に表示される画像で、srcset属性でその他の条件に応じた代替画像を指定しており、デバイスピクセル比が1.5の環境においては「example-1.5x.png」が表示されますし、デバイスピクセル比が2の環境においては「example-2x.png」が表示されます。

srcset属性では画像のURLと、表示する条件（上の例だと1.5xや2x）を半角スペースで区切って指定します。

デバイスピクセル比のときは「x」という単位をつけますが、画面の幅「w」と高さ「h」で指定することも可能。

また、複数の画像はカンマ（,）で指定することができます。

type（タイプ）

type属性はリンク先のMIMEタイプを指定する属性です。

MIMEタイプというのは、テキストや画像、動画、音声データなどのファイル形式を示す識別子のこと。

たとえば以下のようなものがあります。

media（メディア）

media属性はリンク先の文書や読み込む外部リソースが、どのメディアに適用するのかを指定する属性です。

デバイス別にCSSを分けたりするときに使う技術のことをメディア・クエリといい、属性の値はメディア・クエリである必要があります。

メディアには以下のようなものがあります。

関連記事
『audio要素で音声ファイルを埋め込む【HTML】』
『video要素で動画ファイルを埋め込む【HTML】』