最終更新日

source要素

source要素は、video要素audio要素に対し、再生対象のメディアリソースを、複数のファイル形式の中から選べるようにします。

HTML5ではvideo要素で動画ファイル、audio要素で音声ファイルの再生を指定できますが、対応しているファイルの形式はブラウザにより異なります。video要素やaudio要素内でsource要素を使うと、再生用のファイルを複数指定できるようになり、ブラウザは複数の選択肢から、再生対象のファイルを選択可能です。ブラウザにより、記述順にファイルがチェックされ、再生可能なファイル形式が見つかるとその時点でファイルの再生が処理されます。source要素自身はコンテンツを持たない空要素で、終了タグはありません。

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

type属性では、メディアファイルの種類をMIMEタイプで指定し、ブラウザが、データを取り込む前に再生可能か判断できるようにします。

media属性は、メディアファイルのメディアタイプを指定します。省略時の既定値は「all」で、そのメディアファイルがすべてのメディアに適していることを示します。

HTML5での変更点
・source要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
なし 空要素 videoaudio なし
属性 説明
src URL メディアファイルのURLを指定します。(必須属性
type MIMEタイプ ファイルの種類を指定します。
media メディアタイプ メディアの種類を指定します。省略時の初期値は「all」です。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <video autoplay controls>
    <source src="sample.mp4" type="video/mp4">
    <source src="sample.ogg" type="video/ogg">
  </video>
</body>
参考文献:W3C HTML5「4.8.8 The source element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。