sourceタグとは?|再生するファイルを複数指定する

sourceタグとは?|再生するファイルを複数指定する
博士
<video>タグと<audio>タグの使い方が分かったら、一緒に<source>タグの使い方も理解しておこう。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<source>タグとは

 

<source>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所 video要素またはaudio要素の子要素として(ただし、どのフロー・コンテンツおよびtrack要素よりも前)
内容


 
 
<source>タグは、video要素audio要素で再生するメディアファイルを複数指定する際に使用します。
<source>タグは、video要素やaudio要素の中でのみ使用できます。

通常、video要素やaudio要素のsrc属性では、ファイルを1つしか指定できませんが、<source>タグを使用すれば、複数のメディアファイルを指定することができるようになります。
ブラウザは、記述された順にファイルをチェックしていき、再生可能なファイルが見つかった時点でファイルを再生します。
その場合、それ以降のsource要素は無視されます。

メディアファイルにはさまざまな形式のものがあり、ブラウザによって対応するファイル形式も異なります。
そのため、1つのメディアファイルを指定しただけでは、再生できるブラウザも限られてしまいます。
しかし、<source>タグを使って形式の異なる複数のメディアファイルを指定しておくことで、どのブラウザでも再生できるようになります。

video要素やaudio要素に対応していないブラウザへの代替コンテンツは、source要素の後に記述する必要があります。
 
 

src属性

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

 
 

スポンサーリンク

type属性

メディアファイルのMIMEタイプやコーデックを指定します。
この属性は、ブラウザが再生可能なファイルかどうかを事前に判別するヒントにもなりますので、指定しておくことをオススメします。

 
 
また、同時にコーデック名を指定することもできます。
コーデック名を指定する場合は、以下のようにMIMEタイプに続けてcodecsパラメータを記述します。

 
 

media属性

source要素に指定されたメディアファイルを、どのメディアに適用するのかを指定します。
例えば、PCなら「screen」、テレビなら「tv」のように指定します。

 
 
この属性が省略された場合は「all」として処理され、すべてのメディアに同じメディアファイルが適用されます。
 
 

スポンサーリンク

使用例

 
 

まとめ

video要素やaudio要素で複数のメディアファイルを指定する際は、<source>タグを使用します。
 
 

博士
<video>タグ、<audio>タグとセットで覚えておこう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








sourceタグとは?|再生するファイルを複数指定する