HTML5

タグ（要素）

SOURCE

→● mdn

IMG の画像ソース、または VIDEO もしくは AUDIO のメディア ソースを表す。

この要素を使用できる文脈

IMG 要素の前の、PICTURE 要素の子として。

任意のフロー内容または TRACK 要素の前で、メディア要素の子として。

内容モデル

Nothing。

text/htmlにおけるタグ省略

終了タグなし。

内容属性

• type ─ 埋め込みリソースタイプ
• src（in VIDEO or AUDIO） ─ リソースのアドレス
• srcset（in PICTURE） ─ 高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像。他。
• sizes（in PICTURE） ─ さまざまなページ レイアウトの画像サイズ
• media（in PICTURE） ─ 該当するメディア
• width（in PICTURE） ─ 横方向の寸法
• height（in PICTURE） ─ 縦方向の寸法

解説

著者にIMG要素に対する複数の代替ソース セットまたはメディア要素に対する複数の代替メディア リソースの指定を許可する。この要素は、自分自身で何かを表すものではない。

例

<SCRIPT>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</SCRIPT>
<VIDEO controls autoplay>
 <SOURCE src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <SOURCE src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</VIDEO>

type属性

埋め込みリソース タイプ。

この属性は存在してもよい。存在する場合、値は妥当な MIME タイプ文字列でなければならない。

要件の残りの部分は、親が PICTURE 要素またはメディア要素であるかどうかによって異なる：

リソースの MIME メディア タイプで、オプションで codecs 引数 (en-US) を伴います。

type 属性が指定されていない場合は、サーバーからメディア形式を取得して、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次の source 要素をチェックします。type 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリーさえ行わず、次の source 要素をチェックします。

SOURCE 要素の親が PICTURE 要素である

srcset 属性は存在しなければならず、かつ srcset 属性である。

SOURCE要素が選択される場合、srcset属性はソース セットの画像ソースに寄与する。

srcset 属性が幅記述子を用いる任意の画像候補文字列を持つ場合、sizes 属性も存在しなければならず、かつ sizes 属性である。SOURCE 要素が選択される場合、sizes 属性はソース セットのソース サイズに寄与する。

media 属性は存在してもよい。存在する場合、値は妥当なメディア クエリー リストでなければならない。値が環境とマッチしない場合、ユーザー エージェントは次の SOURCE 要素にスキップする。

type 属性が与えられた種類をサポートしない場合に、次の SOURCE 要素にスキップするのをユーザー エージェントに可能にするために、この属性はソース セットで画像の種類を与える。

type 属性が指定されない場合、ユーザー エージェントがフェッチする後で画像フォーマットをサポートしないならば、ユーザー エージェントは異なる SOURCE 要素を選択しない。

SOURCE 要素が次の兄弟 SOURCE 要素または指定される srcset 属性をもつ IMG 要素を持つ場合、この要素は少なくとも以下の 1 つを持たなければならない：

• 先頭および末尾の ASCII 空白を除去する 後で、空文字列でなくかつ ASCII 大文字・小文字不区別で文字列 "all" に一致しないような値で指定される media 属性。
• 指定される type 属性。

src 属性は存在してはならない。

SOURCE 要素の親がメディア要素である

src 属性は、メディア リソースの URL を与える。値は、潜在的にスペースで囲まれた妥当な空でない URLでなければならない。この属性は存在しなければならない。

要素が VIDEO や AUDIO 要素にすでに挿入されている場合、SOURCE 要素とその属性を動的に変更しても効果はない。再生している内容を変更するためには、使用可能なリソースの中から選択する canPlayType() メソッドをおそらく利用して、直接メディア要素の src 属性を単に使用する。一般に、文書が解析された後に手動で SOURCE 要素を操作することは、不必要に複雑なアプローチとなる。

type 属性は、この属性をフェッチする前に、このメディア リソースを再生できるかどうかをユーザー エージェントが判断するために、メディア リソースの型を示す。特定の MIME タイプが定義する codecs パラメーターは、リソースがエンコードされる方法を正確に指定する必要があるかもしれない。[RFC6381]

次のリストは、type 属性で codecs=MIME パラメーターを使用する方法の例を示す。

H.264 制約ベースライン プロファイル ビデオ（メインおよび拡張ビデオ互換性のある）レベル 3 と MP4 コンテナでの Low-Complexity AAC オーディオ：

<SOURCE src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264 拡張プロファイルビデオ（ベースライン対応）レベル 3と MP4 コンテナでの Low-Complexity AAC オーディオ：

<SOURCE src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264 メイン プロファイル ビデオ レベル 3 と MP4 コンテナの Low-Complexity AAC オーディオ：

<SOURCE src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 'High' プロフィール ビデオ（メイン、ベースライン、または拡張プロファイルと互換性がない）レベル 3 と MP4 コンテナでの Low-Complexity AAC オーディオ：

<SOURCE src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4 ビジュアルのシンプル プロファイル レベル 0 ビデオと MP4 コンテナの Low-Complexity AAC オーディオ：

<SOURCE src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4 アドバンスト シンプル プロファイル レベル 0 ビデオと MP4 コンテナの Low-Complexity AAC オーディオ：

<SOURCE src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4 映像シンプル プロファイル レベル 0 ビデオおよび 3GPP コンテナ内 AMR オーディオ：

<SOURCE src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Theora ビデオと Ogg コンテナでの Vorbis オーディオ：

<SOURCE src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Theora ビデオと Ogg コンテナ内の Speex オーディオ：

<SOURCE src='video.ogv' type='video/ogg; codecs="theora, speex"'>

Ogg コンテナで Vorbis オーディオ単独：

<SOURCE src='audio.ogg' type='audio/ogg; codecs=vorbis'>

Ogg コンテナ内の Speex オーディオ単独：

<SOURCE src='audio.spx' type='audio/ogg; codecs=speex'>

Ogg コンテナ内の FLAC オーディオ単独：

<SOURCE src='audio.oga' type='audio/ogg; codecs=flac'>

Dirac ビデオと Ogg コンテナでの Vorbis オーディオ：

<SOURCE src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

srcset、sizes および media 属性は存在してはならない。

src属性（in VIDEO or AUDIO）

メディアリソースの URL を与える。

値は、潜在的にスペースで囲まれた妥当な空でない URLでなければならない。この属性は存在しなければならない。

<VIDEO>
 <SOURCE src="../Sample/Eizou_CM.mp4">
</VIDEO>

srcset属性（in PICTURE）

高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像。他。

この属性は存在しなければならず、かつ srcset 属性である。

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

1. 画像を指定する URL を1つ
2. 幅記述子。これは正の整数に「w」を付加した文字列で、例えば「300w」のようになります。指定しない場合の既定値は無限大です。
3. 画素密度記述子。これは直後に「x」を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。

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

srcset 属性は、SOURCE 要素が PICTURE 要素の子要素である場合にのみ効果があります。

<PICTURE>
 <SOURCE srcset="../Sample/Picture.jpg">
 <IMG>
</PICTURE>

<PICTURE>
 <SOURCE srcset="../Sample/Picture.jpg 100w" sizes=10vw>
 <IMG><BR>
</PICTURE>
<PICTURE>
 <SOURCE srcset="../Sample/Picture.jpg 200w" sizes=10vw>
 <IMG><BR>
</PICTURE>

<PICTURE>
 <SOURCE srcset="../Sample/Picture.jpg 1x">
 <IMG><BR>
</PICTURE>
<PICTURE>
 <SOURCE srcset="../Sample/Picture.jpg 2x">
 <IMG><BR>
</PICTURE>
<PICTURE>
 <SOURCE srcset="../Sample/Picture.jpg 0.5x">
 <IMG><BR>
</PICTURE>

<DIV style="width:100px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 200w, ../Sample/Picture_M.jpg 300w" sizes="20vw">
  <IMG>
 </PICTURE>
</DIV>

<DIV style="width:100px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 300w, ../Sample/Picture_M.jpg 200w" sizes="20vw">
  <IMG>
 </PICTURE>
</DIV>

sizes属性（in PICTURE）

さまざまなページ レイアウトの画像サイズ。

srcset 属性が幅記述子を用いる任意の画像候補文字列を持つ場合、sizes 属性も存在しなければならず、かつ sizes 属性である。source 要素が選択される場合、sizes 属性はソース セットのソース サイズに寄与する。

<DIV style="width:150px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 100w" sizes="10vw">
  <IMG><BR>
 </PICTURE>
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 100w" sizes="20vw">
  <IMG><BR>
 </PICTURE>
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 100w" sizes="30vw">
  <IMG><BR>
 </PICTURE>
</DIV>

<DIV style="width:200px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 100w" sizes="100px">
  <IMG><BR>
 </PICTURE>
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 100w" sizes="200px">
  <IMG><BR>
 </PICTURE>
 <PICTURE>
  <SOURCE srcset="../Sample/Picture.jpg 100w" sizes="300px">
  <IMG><BR>
 </PICTURE>
</DIV>

media属性（in PICTURE）

該当するメディア。

値は妥当なメディア クエリー リスト（→●）でなければならない。値が環境とマッチしない場合、ユーザー エージェントは次の SOURCE 要素にスキップする。

<DIV style="width:100px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture_2x.jpg" media="print">
  <IMG src="../Sample/Picture.jpg"><BR>
 </PICTURE>
</DIV>

<DIV style="width:200px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture_M.jpg" media="screen and (min-width:600px)">
  <SOURCE srcset="../Sample/Picture_2x.jpg" media="screen and (min-width:500px)">
  <IMG src="../Sample/Picture.jpg"><BR>
 </PICTURE>
</DIV>

width属性（in PICTURE）

横方向の寸法。

<DIV style="width:200px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture_2x.jpg" media="(min-width:500px)" width="100">
  <IMG src="../Sample/Picture.jpg"><BR>
 </PICTURE>
</DIV>

<DIV style="width:200px; border:1px solid black;">
 <PICTURE>
  <SOURCE srcset="../Sample/Picture_2x.jpg" media="(min-width:500px)" width="50%">
  <IMG src="../Sample/Picture.jpg"><BR>
 </PICTURE>
</DIV>

height属性（in PICTURE）

縦方向の寸法。

テスト