<source> * - ソース(新)

■ 概要

項  目説  明
記述形式 <source src="メディア・ファイル">
対応ブラウザー H5+ / e9+ / Fx3.5+ / Op10.5+ / Ch1+ / Sa3.1+
種  類
(カテゴリー)
なし
置ける場所 media要素audio要素video要素)の子要素  
フロー・コンテンツtrack要素より前)  
内包要素
(コンテンツ・モデル)

(コンテンツ・モデル:

■ 解説

<source> は,video要素audio要素で再生するメディア・ファイルを指定するための要素です。

video要素audio要素src属性による指定では,1つのファイルのみですが,source要素を複数使用すれば,複数のメディア・ファイルが指定できます。 上から順番にチェックして,再生可能なファイルが見つかった時点でそのファイルを再生します。 この場合,それ以降の source要素によるファイルの指定は無視されます。

このような複数のメディア・ファイルを指定する理由は,現在のところ,ブラウザーによって対応するメディア・ファイルの形式が異なるためです。 1つのメディア・ファイルを指定しただけでは,再生できるブラウザーが限定されてしまいます。 そこで,あらかじめ各ブラウザーが対応する形式のファイルをそれぞれ用意して,それらをすべて source要素で指定しておくことで,多くのブラウザーに対応できます。

なお,video要素audio要素に未対応のブラウザーへのフォールバック・コンテンツ(代替のコンテンツ)は,source要素の後に記述します。

■ 属性

種  類名  称
【固有属性】 src, type, media
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
なし
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ   

src属性
メディア・ファイルの URL を指定します。 この属性は必須です。

type属性
メディア・ファイルの形式をMIMEタイプで指定します。

media属性
src属性で指定したメディア・ファイルを,どのメディアに適用するのかを指定します。 例えば,PC画面なら "screen",テレビなら "tv" というように指定します。 既定値は "all" です。 したがって,media属性が省略された場合は,すべてのメディアに対して指定したメディア・ファイルが使用されます。 この media属性の値の一覧を以下に示します。

media属性の値説 明
screen パソコンのモニタ画面
tty 文字幅が固定の端末機器
tv テレビ
projection プロジェクター
handheld 携帯機器
print プリンター
braille 点字ディスプレイ
embossed 点字プリンター
aural 音声出力
all すべてのメディア

■ CSSプロパティ

種  類名  称
【よく使うもの】

■ 使用例

HTMLソース
HTML
<body> ~ </body>
<audio autoplay>
  <source src="xxx.mp3" type="audio/mp3">
  <source src="xxx.wav" type="audio/wav">
  <source src="xxx.ogg" type="audio/ogg">
  <p>このブラウザーは audio要素に未対応です。</p>
</audio>

■ 備考