概要
source 要素 (<source />) は HTML5 文書における <picture> 要素、audio 要素及び video 要素に対し、複数のメディアリソースを指定する場合に用います。この要素自体は空要素です。この要素は一般的に、各ブラウザ毎にサポートの異なる複数のメディア形式 を指定する場合に用います。
使用可能な場所
| コンテンツカテゴリ | なし |
|---|---|
| 許可された内容 | 無し。この要素は空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可された親要素 | メディア要素 (<audio> および <video> で、どのフローコンテンツまたは <track> 要素よりも前に配置する。<picture> 要素で、<img> 要素より前に配置する。 |
| DOM インターフェイス | HTMLSourceElement |
属性
他の全ての要素と同様に、この要素はグローバル属性を持ちます。
sizes- source で示した画像を最終的に表示する幅を表す、ソースサイズのリスト。それぞれのソースサイズは、条件と長さのペアをカンマ区切りで並べたものです。この情報は
srcsetで指定された画像を使用する際に、ページのレイアウトを行う前にブラウザが使用します。
sizes属性は、<source>要素が<picture>要素の子要素である場合にのみ効果があります。 src- メディア・リソースのアドレスを示します。
<audio>および<video>では必須です。<picture>要素の内部にある<source>要素では、この値が無視されます。 srcset- 1 つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザが使用できる画像のセットを示します。各々の文字列の構成は以下のとおりです:
- 画像のURLを 1 つ
- 幅記述子。これは直後に
'w'を付加した正の整数です。指定しない場合のデフォルト値は無限大です。 - 画素密度記述子。これは直後に
'x'を付加した正の浮動小数点数です。指定しない場合のデフォルト値は1xです。
リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内では、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。
ブラウザは、表示する時点でもっとも適切な画像を選択します。
srcset属性は、<source>要素が<picture>要素の子要素である場合にのみ効果があります。 type- リソースの MIME-type。 必要に応じて
codecsパラメーターも共に指定します。 コーデックの指定方法に関する情報については RFC 4281 を参照して下さい。 media- リソースの意図したメディアのメディア・クエリー。この属性は
<picture>要素の内部でのみ使用します。
type 属性が指定されていない場合は、サーバーからメディア形式が取得され、Gecko が処理可能な形式であるか確認されます。処理可能な形式である場合はそれが使用され、処理出来ない形式であった場合は次の source 要素が確認されます。 type 属性が指定されている場合は、その指定値が Gecko で再生可能であるか確認されます。また指定値が、認識できない値であった場合は、サーバーは照会さえされず、次の source 要素がチェックされます。
【訳注: ブラウザの処理を軽減する為に、type 属性は指定しておく方が好ましいといえるでしょう。】
例
次の例は、Ogg 形式をサポートしたブラウザと QuickTime ビデオ形式を再生可能な環境を想定した記述例となります。
audio 要素や video 要素がブラウザでサポートされていない場合、代わりにメッセージが表示されます。
audio 要素や video 要素はサポートしていても指定した形式の全てが再生不可である場合は、エラーイベントが発生し、（有効な場合は）既定のメディアコントロール・エラーが示されます。各主要ブラウザのサポート形式については HTML5 の audio 要素と video 要素でサポートされているメディアフォーマットの一覧を参照して下さい。
<video controls> <source src="foo.ogg" type="video/ogg"> <!-- Firefox が採用 --> <source src="foo.mov" type="video/quicktime"> <!-- Safari が採用 --> I'm sorry; your browser doesn't support HTML5 video. </video>
その他の例については、『HTML5 の audio 要素と video 要素の利用』の頁を参照して下さい。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <source> の定義 |
現行の標準 | <picture> 要素内で使用する <source> を定義 |
| WHATWG HTML Living Standard <source> の定義 |
現行の標準 | メディア要素 <audio> および <video> 要素内で使用する <source> を定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有) | 3.5 (1.9.1) | 9.0 | (有) | (有) |
media 属性 |
(有) | 15.0 (15.0) | 9.0 | (有) | (有) |
sizes 属性 |
? | 33 (33)[1] | ? | ? | ? |
srcset 属性 |
? | 33 (33)[1] | ? | ? | ? |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有) | 1.0 (1.0) | ? | ? | ? |
media 属性 |
(有) | 15.0 (15.0) | ? | ? | ? |
sizes 属性 |
? | 33.0 (33)[1] | ? | ? | ? |
srcset 属性 |
? | 33.0 (33)[1] | ? | ? | ? |
[1] この機能は設定項目 dom.image.picture.enabled で制御しており、既定値は false です。
現在、全機能のうちの小さなサブセットのみが実装されています（Gecko は、サポートされているメディア形式の MIME-type と一致する形式を持つ最初のリソースしか選択しません）
詳細については バグ 449363 を参照して下さい。
関連情報
<picture>要素