HTML - source 要素

概要

名前
source
カテゴリー
なし
配置できる場所
picture 要素の子要素の場合、img 要素よりも前に配置すること。audio 要素、または video 要素の子要素の場合、どの Flow content、または track 要素よりも前に配置すること。
コンテンツモデル
空要素のため、子ノードを持ちません。
説明
source 要素は、出力先に合わせて用意した複数の候補データの中から最適なデータだけを読み込んで利用できるようにする際の候補となる個々のデータを指定する要素です。source 要素内で使用する場合と、audio 要素video 要素の内部で使用する場合とでは、指定可能な属性や指定方法が異なる点に注意してください。画像の候補データを指定する場合は、picture 要素の内部に source 要素を必要なだけ配置し、最後に img 要素をひとつ入れます。media 属性には、どの画像を読み込むかを判断するためのメディアクエリの条件を指定できます。また、media 属性を使用せずに type 属性で MIME タイプを示し、表示可能な形式の最初の画像を表示させることもできます。picture 要素の内部では、その他にも srcset 属性と sizes 属性が指定可能です。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLSourceElement
仕様書
仕様書策定状況コメント
LS:現行の標準
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.5
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
media915
sizes3899.2
src93.5
srcset3899.2
type93.5
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
media
リソースの志向するメディアのメディアクエリ。この属性はpicture 要素の内部でのみ使用します。
sizes
source で示した画像が最終的に表示される幅を表す、ソースのサイズのリスト。それぞれのソースのサイズは、条件と長さの組をコンマ区切りで並べたものです。この情報は srcset 属性で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザが使用します。sizes 属性は、 source 要素がpicture 要素の子要素である場合にのみ効果があります。
src
メディアのリソースの場所であり、audio 要素、および video 要素では必須です。picture 要素の内部にある source 要素では、この値は無視されます。
srcset
1 つ以上の文字列をコンマ区切りで並べたリストであり、ブラウザが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。
  1. 画像の URL を 1 つ
  2. 幅記述子。これは直後に 'w' を付加した正の整数です。指定しない場合の既定値は無限大です。
  3. 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。
リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内には、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。ブラウザは、表示する時点でもっとも適切な画像を選択します。srcset 属性は、source 要素がpicture 要素の子要素である場合にのみ効果があります。
type
リソースの MIME タイプ。必要に応じて codecs 引数も共に指定します。コーデックの指定方法に関する情報については RFC 4281 を参照してください。type 属性が指定されていない場合、サーバからメディア形式を取得し、ユーザエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次の source をチェックします。type 属性が指定された場合、ユーザエージェントが表示できる形式と比較し、扱えないものであれば、サーバはクエリさえ行わず、次の source 要素をチェックします。

サンプルコード

source 要素のサンプルコードは以下のとおりです。

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg"> 
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>
source 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
9
Shares:
0
Tag:
HTML
hatebu icon
hatebu