We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML の <source> 要素は、 <picture> 要素、 <audio> 要素、 <video> 要素に対し、複数のメディアリソースを指定します。この要素自体は空要素です。この要素は一般的に、同一のメディアコンテンツをそれぞれのブラウザーに対応した複数のメディア形式で提供する場合に用います。

コンテンツカテゴリー なし
許可されている内容 なし。この要素は空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
許可されている親要素
メディア要素(<audio> または <video>)の場合、どの フローコンテンツまたは <track> 要素よりも前に配置する。
<picture> 要素の場合、 <img> 要素より前に配置する。
許可されている ARIA ロール なし
DOM インターフェイス HTMLSourceElement

属性

この要素にはグローバル属性があります。

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 を参照してください。
media
リソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。

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

次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 audio 要素や video 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 error イベントが発生し、(もしあれば)既定のメディアコントロールがエラーを示します。様々なブラウザーが対応するaudio 及び video 要素が対応するメディア形式の一覧も参照してください。

<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>

その他の例については、 HTML5 の audio 要素と video 要素の利用のページを参照してください。

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
<source> の定義
現行の標準  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり3.519 あり あり
media あり あり159 あり あり
sizes あり あり

38

332

? ? ?
src あり あり3.59 あり あり
srcset あり あり

38

332

? ? ?
type あり あり3.59 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり41 ? ? あり
media あり あり あり15 ? ? あり
sizes あり あり あり

38

332

? ? あり
src あり あり あり4 ? ? あり
srcset あり あり あり

38

332

? ? あり
type あり あり あり4 ? ? あり

1. Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.

2. From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, RobinEgg
最終更新者: mfuji09,