source 要素

4.7.8 source 要素

カテゴリー:
なし
この要素を使うことができるコンテキスト:
メディア要素の子として。ただし、あらゆるフロー・コンテントtrack 要素より前。
コンテントモデル:
コンテント属性:
グローバル属性
src - リソースのアドレス
type - 組み込まれるリソースのタイプ
text/html におけるタグの省略:
終了タグはありません。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
interface HTMLSourceElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString media;
};

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

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

この要素がすでに videoaudio 要素に挿入されてから、動的に source 要素やその属性を変更しても、何も効果はありません。再生されているものを変更するなら、直接的に該当のメディア要素src 属性を使ってください。canPlayType() メソッドを利用して、取得可能なリソースの中から取り出すのがよいでしょう。一般的に、ドキュメントがパースされた後に、手動で source 要素を操作することは、不必要に複雑なアプローチです。

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

次のリストは、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) {
   // <video> をそのコンテンツで置き換える
   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/2014/REC-html5-20141028/embedded-content-0.html#the-source-element