ウェブランサー

<source> 再生候補となる動画や音源などのメディアソースを指定する

取り扱い HTML5から追加された要素
カテゴリ なし
親にできる要素 <audio>および<video>内で<track>要素よりも前に配置する。<picture>要素内で、<img>要素より前に配置する。
子にできる要素 なし
対応ブラウザ <source>の対応状況を確認する

<source>タグの説明

<source>は、動画や音声などのメディアファイルのURLや種類を指定する際に使用します。<audio>要素<video>要素<picture>要素の子要素として設置することが可能です。

この要素は一般的に、各ブラウザ毎にサポートの異なる複数のメディア形式を指定する場合に用います。複数の候補を記述しておくことで、フォーマットの異なるメディアファイルに対応し、ブラウザごとに再生可能なデータを利用することができます。

<source>タグの特徴

<source>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

<source>タグに指定できる属性

src属性
メディアファイルのURLを指定します。必須属性です。
type属性
メディアファイルのMIMEタイプやコーデックを指定します。
media属性
リソースが意図したメディア・クエリーを指定します。

<source>タグの使い方とサンプル

<source>を使ったマークアップのサンプルです。

HTML
<video controls autoplay>
	<source src="foo.ogg" type="video/ogg">
	<source src="foo.mov" type="video/quicktime">
	Your browser does not support HTML5 video.
</video>

<source>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する