<source> - ソース

目次

概要

形式
<source src="...">
サポート
https://caniuse.com/mdn-html_elements_source
カテゴリ
該当無し
親要素
picture 要素 (img 要素よりも前に記述すること)
メディアコンテンツ (フローコンテンツ や track 要素よりも前に記述すること)
子要素
無し(Empty)
タグの省略
開始タグ:必須 / 終了タグ:無し
属性
グローバル属性
type
media
src
srcset
sizes
width
height

説明

<video> や <audio> や <picture> の子要素として使用し、複数のメディアソース選択肢を指定します。ブラウザは複数の選択肢の内、最初に見つかった再生可能なソースを再生します。

属性

グローバル属性
詳細は グローバル属性 を参照してください。
src=url
LS/H5/e/Ch/Fx/Sa/Op
<audio> または <video> の子要素の場合に指定可能です。メディアソースのURLを指定します。
type=type
LS/H5/e/Ch/Fx/Sa/Op
メディアタイプ(MIMEタイプ)を指定します。
media=media
LS/H5/e/Ch/Fx/Sa/Op
メディアリソースを指定します。HTML5.1 では <picture> の子要素の場合のみ指定可能となりました。詳細は @media を参照してください。
srcset=srcset
LS/Ch/Ed/Fx
ソースセットを指定します。<picture> の子要素の場合に指定可能です。詳細は <img> を参照してください。
sizes=sizes
LS/Ch/Ed/Fx
srcset で指定した画像の大きさを指定します。詳細は <img> を参照してください。
width=n
LS
横幅をピクセル単位で指定します。
height=n
LS
高さをピクセル単位で指定します。

使用例

例えば下記の例では、ブラウザが MP3 をサポートしていれば再生されますが、MP3 をサポートしていないブラウザでは再生されません。

HTML
<audio src="xxx.mp3" autoplay></audio>

下記の様に選択肢を指定することで、MP3をサポートしていればMP3を再生し、サポートしていなければWAV、OGGの再生を順に試みます。

HTML
<audio autoplay>
  <source src="xxx.mp3" type="audio/mp3">
  <source src="xxx.wav" type="audio/wav">
  <source src="xxx.ogg" type="audio/ogg">
</audio>

詳細

いずれもサポートされていない場合(onerror)

最後の source要素の onerror属性で、すべての形式がサポートされていなかった場合に実行する JavaScript を指定することができます。

HTML
<audio autoplay>
  <source src="xxx.mp3" type="audio/mp3">
  <source src="xxx.wav" type="audio/wav">
  <source src="xxx.ogg" type="audio/ogg" onerror="error()">
</audio>
Copyright (C) 2011-2022 杜甫々
初版:2011年6月11日 最終更新:2022年2月6日
https://www.tohoho-web.com/html/source.htm