<source>
sourece（ソース）要素はaudio要素、video要素、picture要素に対して選択可能な複数なファイルを複数指定することができます。
| source要素 | 説明 |
|---|---|
| カテゴリー | なし |
| コンテンツモデル | 空 |
| 使用できる場所 | audio要素、video要素の子要素として記述できる。但し、すべてのフローコンテンツやtrack要素の前に記述する。 picture 要素の子要素として。ただし、img 要素の前に記述する。 |
source要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| src | 埋め込むURI | 文書内に埋め込む画像やスクリプト、他の HTML 文書など、外部リソースの URI を指定します。 |
| srcset | URLと記述子 srcset属性指定できる値については、下の、srcset属性を参照してください。 | 候補画像（埋め込む画像） |
| type | MIMEタイプ type属性に指定できる値については、下の、MIMEタイプを参照してください。 | リンク先のMIME（組み込むデータの種類）タイプを指定する。 |
| media | 値については下のmedia属性に指定できる値を参照ください。 | 音声、動画ファイルが対応しているメディアタプを指定する。 |
| sizes | sizes属性に指定できる値については、下の、sizes属性を参照してください。 |
srcset属性
srcset 属性は、picture要素内で使用するsource 要素や、img要素において、複数のイメージソースを指定するために使用される。値は 「カンマ（,）」 区切りで複数の画像候補のURLを指定する事ができる。
srcset属性の値 （Image Candidate String） は下記のルールに従って記述できる。
1.0 個以上の空白文字
2.イメージリソースの URL ： “,” で開始、または終了しない、妥当な、空でない URL で、非インタラクティブを参照し、任意でアニメーション、ページ化もスクリプト化もされないイメージリソース
3.0 個以上の空白文字
4.次のうちどちらか一方、もしくは 0 個
・画面の横幅を指定する正の整数に加えて小文字で 「w」
・デバイスピクセル比を指定する浮動小数点数に加えて小文字で 「x」
5.0 個以上の空白文字
さらに、media属性 と組み合わせるなどして、複雑な指定も可能になる。
MIMEタイプ
| MIMEタイプ | データ形式 |
|---|---|
| text/plain | プレーンテキスト |
| text/css | CSS |
| text/javascript | JavaScript |
| application/javascript | JavaScript |
| text/html | HTML 文書 |
| application/xhtml+xml | XHTML 文書 |
| application/xml | XML 文書 |
| image/png | PNG 形式の画像 |
| image/gif | GIF 形式の画像 |
| image/jpeg | JPEG 形式の画像 |
| video/mp4 | MPEG-4 形式の動画 |
| audio/mp3 | MP3 形式の音声データ |
a要素などにおけるtype属性
a、area、link要素におけるtype属性はリンク先のMIMEタイプを指定します。MIMEタイプには下記のようなものが挙げられる。
input要素におけるtype属性
input要素におけるtype属性は入力コントロールの種別を指定する。
object要素などにおけるtype属性
下記の要素における type 属性は埋め込まれる外部リソースの MIMEタイプを指定する。
- embed要素
- object要素
- script要素
- source要素
- style要素
ol要素におけるtype属性
ol要素におけるtype 属性はリストマーカーの形式を指定する。
menu要素におけるtype 属性
menu要素における type 属性はメニューのタイプを指定する。
menuitem要素におけるtype属性
menuitem要素におけるtype属性はメニュー項目のタイプを指定する。
media属性に指定できる値
| 値 | 説明 |
|---|---|
| all | すべてのデバイスに適用できます。 |
| aural | 音声合成装置 |
| braille | 点字出力デバイス |
| handheld | 携帯電話など画面が小さいデバイス |
| プリンタでの印刷。印刷のプレビュー画面 | |
| projection | プロジェクター。Opera のフルスクリーンモード時もこれに該当する。 |
| screen | 一般的なコンピュータースクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトは、すべて対象になります。 |
| tty | テレタイプなど表示文字幅が固定されたデバイス。 |
| tv | テレビなど、解像度や色数に制限があるデバイス。 |
sizes属性
link要素におけるsizes属性
link 要素におけるsizes属性は rel=”icon” あるいは rel=”apple-touch-icon”が指定されたlink要素でのみ使用できる。値は 「横幅x高さ」 の形式、例えば 16×16 のように指定する。 16X16 のように 「x」 は大文字でも構わない。
また、値は半角スペースで区切ることで複数指定することもできる。例えばマルチアイコンのように、1つのファイルに複数サイズの画像が含まれているような場合に各サイズを表すことができる。
img要素、source要素におけるsizes属性
img要素、source要素 におけるsizes属性で指定できる値は下記のルールで示される。
・下記の各組をカンマ区切りで 1個以上
1.下記の組み合わせが 0組以上（両方の場合は空白文字で区切って記述）
1-1.メディアクエリ
1-2.画像の表示サイズ値
2.画像の表示サイズ値
・もしくは auto
auto 値を使用しない場合、具体的には、sizes=”(max-width: 768px) 100vw, 320px” のような指定となる。この場合、(max-width: 768px) が該当する環境では100vwが適用され、それ以外では320pxが適用されることになります。この記述をさらに細かく指定することも可能。
sizes=”(max-width: 768px) 100vw, (max-width: 480px) 90vw, (max-width: 320px) 80vw, 320px”
picture要素内において、複数のイメージソースを指定するために使用されるsource要素では、このsizes 属性に加えて、srcset属性やmedia属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になる。
sizes=”auto”
source要素の sizes属性および img要素のsizes属性には、以下の条件を満たす場合、auto値を指定することができる。それ以外の場合は、auto値を指定してはいけない。
source要素に続く兄弟要素としてのimg要素、または単体のimg要素、かつ img 要素の loading属性の値がlazyの場合。
使用例
<video controls height="300" width="350" muted>
<source src="./IMG_0920.webm" type="video/webm">
<source src="./IMG_0920.mp4" type="video/mp4">
</video>表示