<source>:画像・動画・音声などのメディアリソースを提供する要素・HTMLタグの解説

取り扱い 標準仕様
カテゴリー なし
親にできる要素 <audio>および<video>の中では<track>要素よりも前に配置。<picture>の中では<img>よりも前に配置
子にできる要素 なし
対応ブラウザ caniuseで確認

<source>タグの解説

<source>は、画像・動画・音声などのメディアリソースを提供する要素です。具体的には<picture><video><audio>の子要素に配置し、その埋め込み要素が条件に応じて配信するメディアのリソースを指定します。

一般的には、各ブラウザ毎にサポートの異なる複数のメディア形式を指定したり、画面の幅に応じて画像のサイズを変える場合に用います。複数のリソース候補を記述しておくことで、フォーマットの異なるメディアファイルに対応し、ユーザーの環境ごとに最適なデータを提供できるようになります。

<source>タグの特徴

  • この要素自体は可視化されません。親要素によって読み込まれるファイルの候補を示すだけです。
  • この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。

<source>要素に指定できる属性

src
<video>および<audio>の中では必須。<picture>の中では指定できません。メディアファイルのURLを指定します。
srcset
<picture>が親の場合のみ指定できます。ブラウザが使用できる画像のリソースをひとつ以上、カンマ区切りで指定できます。リソースに対してピクセルの幅(w)や密度(x)の解釈を与えることも可能です。
type
メディアファイルのMIMEタイプやコーデックを指定します。
media
ソースが意図したメディア・クエリーを指定します。親要素が<picture>の場合にのみ使用できます。
sizes
<picture>が親の場合のみ指定できます。最終的に画像が表示される幅を指定します。この値はsrcset属性で指定された画像が読み込まれる時、ページのレイアウトを行う前にブラウザーが使用します。
height
<picture>が親の場合のみ指定できます。画像の高さをピクセル単位で指定します。値は単位のない整数で表します。
width
<picture>が親の場合のみ指定できます。画像の幅をピクセル単位で指定します。値は単位のない整数で表します。

<source>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。必ず親要素に<picture><video><audio>のいずれかが配置されます。


<picture>
	<source srcset="file" attr="value">
	<img src="file" alt="text">
</picture>

<video>
	<source src="file" type="value">
</video>

<audio>
	<source src="file" type="value">
</audio>

画像のリソースを提供する

画面の大きさに応じて適切なサイズの画像を出し分けたい場合は、条件を指定して呼び出すファイルを変えることができます。<picture>要素を使って<img>に複数のリソースを関連付ける場合、以下のように記述します。


<picture>
	<source srcset="logo-s.png" media="(max-width: 400px)">
	<source srcset="logo-m.png" media="(max-width: 600px)">
	<source srcset="logo-l.png" media="(max-width: 800px)">
	<img src="logo-m.png" alt="Site Logo">
</picture>

動画のリソースを提供する

ページ上に動画コンテンツを配置する場合、一種類のコーデックしか提供するのではなく、複数の候補を用意しておいた方が幅広い環境に対応できます。


<video controls autoplay>
	<source src="foo.webm" type="video/webm">
	<source src="foo.ogg" type="video/ogg">
	<source src="foo.mov" type="video/quicktime">
	ご利用中のブラウザでは動画の再生を行えません。
</video>

音声のリソースを提供する

音楽や音声コンテンツを<audio>で提供する場合、複数のコーデックを候補として提供できます。


<audio controls>
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
	<p>Download <a href="example.com">Music Site</a></p>
</audio>

<source>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像ファイルを読み込む
<picture> 画像に対して複数のリソースを提供可能なコンテナを配置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで描かれたグラフィックやアニメーションを表示する
<audio> ページに音声コンテンツを埋め込む
<video> ページに動画コンテンツを埋め込む
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 音声や動画コンテンツにテキストトラックを提供する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する