<source> - ソース

トップ > HTMLリファレンス > <source>

概要

項目説明
形式<source src="...">
サポートH5 / e9 / Ch1 / Fx3.5 / Sa3.1 / Op10.5
カテゴリ該当無し
親要素audio, video要素 (フローコンテンツtrack 要素よりも前に記述する)
子要素無し(Empty)
タグの省略開始タグ:必須 / 終了タグ:無し

説明

videoaudio の子要素として使用し、複数のメディアソース選択肢を指定します。

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

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

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

<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処理を記述することができます。

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

属性

【固有属性】
属性意味
src=urlH5/e/Ch/Fx/Sa/Op。メディアソースのURLを指定します。
type=typeH5/e/Ch/Fx/Sa/Op。メディアタイプ(MIMEタイプ)を指定します。
media=mediaH5/e/Ch/Fx/Sa/Op。メディアを指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

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>

関連項目

<audio><video>

Copyright (C) 2011-2015 杜甫々
初版:2011年6月11日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/source.htm