<source> - ソース - とほほのWWW入門

形式: <source src="...">
サポート: LS / H5 / e9 / Ch1 / Fx3.5 / Sa3.1 / Op10.5
カテゴリ: 該当無し
親要素: 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>

最後の 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>

<source> - ソース

概要

説明

属性

使用例

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

関連項目

リンク