source 要素

4.8.8 source 要素

カテゴリー
なし
この要素を使うことができるコンテキスト：
メディア要素の子として。ただし、フロー・コンテンツや track 要素の前。
コンテンツモデル：
空
コンテンツ属性：
グローバル属性
src
type
media
DOMインタフェース：
interface HTMLSourceElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString media;
};

source 要素を使って、ウェブ制作者は、選択可能なメディア要素のメディア・リソースを複数指定することができます。この要素は、自身では何も表しません。

src 属性は、メディア・リソースのアドレスを提供します。この値は潜在的にスペースで囲まれた空でない妥当な URL でなければいけません。この属性は必須です。

この要素がすでに video や audio 要素に挿入されてから、動的に source 要素やその属性を変更しても、何も効果はありません。再生されているものを変更するなら、直接的に該当のメディア要素の src 属性を使うか、この source 要素を操作した後に該当のメディア要素で load() メソッドを呼び出してください。

type 属性は、メディア・リソースのタイプを与えます。このタイプは、ユーザーエージェントがメディア・リソースをフェッチする前に再生できるかどうかを決定する際に役立てられるものです。指定されたら、その値は妥当な MIME タイプでなければいけません。codecs パラメータを指定することができますが、それは、どのようにそのリソースがエンコードされているのかを正確に指定するために必要となるでしょう。 [RFC4281]

次のリストは、type 属性の codecs= MIME パラメータをどうやって使うのかを示したものです。

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Theora video and Vorbis audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Theora video and Speex audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
Vorbis audio alone in Ogg container
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Speex audio alone in Ogg container
<source src='audio.spx' type='audio/ogg; codecs=speex'>
FLAC audio alone in Ogg container
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Dirac video and Vorbis audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

media 属性は、メディア・リソースのメディア・タイプを与えます。これは、ユーザーエージェントがフェッチの前にこのメディア・リソースがユーザーに利用可能なのかを決定する際に役立てられます。この値は、妥当なメディア・クエリでなければいけません。

もし media 属性が省略されたら、そのデフォルト値は "all" となります。これは、デフォルトで、メディア・リソースがすべてのメディアに対して適したものであることを意味します。

source 要素がメディア要素の子として挿入され、そのメディア要素は src 属性を持たず、その networkState が NETWORK_EMPTY という値を持つなら、ユーザーエージェントは、そのメディア要素のリソース選択アルゴリズムを呼び出さなければいけません。

IDL 属性 src, type, media は、同じ名前の対応するコンテンツ属性を反映しなければいけません。

ウェブ制作者は、提供するメディア・リソースがすべてのユーザーエージェントでレンダリングできるかどうか確信を持てないなら、最後の source 要素で error イベントをリッスンして、フォールバック・ビヘイビアを起動するようにすることができます：

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-source-element