<source> 画像や動画、音声などのメディアソースを指定する

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

<source>タグの説明

<source>は、画像や動画、音声などのメディアファイルをページに埋め込む場面で、複数の候補先から選べるようにしたい場合に使用します。

具体的には、<picture><video><audio>の子要素として、その埋め込み要素が条件に応じて配置するメディアソースをURLで提供します。

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

<source>タグの特徴

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

<source>に指定できる主な属性

src
メディアファイルのURLを指定します。<video>および<audio>の中では必須。<picture>の中では無視されます。
type
メディアファイルのMIMEタイプやコーデックを指定します。
media
ソースが意図したメディア・クエリーを指定します。親要素が<picture>の場合にのみ使用できます。
sizes
ソースが表示されるサイズを指定します。この値はsrcset属性で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。
srcset
ブラウザが使用できる画像のセットをカンマ区切りで指定できます。一つのソースに対して、幅や解像度の解釈を与えることも可能です。

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

このタグを使ったマークアップのサンプルです。埋め込み要素のタグに直接メディアファイルのURLを指定する場合、一種類のコーデックしか提供できませんが、複数の候補を用意しておくことで幅広い環境に対応できます。

HTML
<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>

画面の大きさに応じて適切なサイズの画像を出し分けたい場合は、条件を指定して呼び出すファイルを変えることも可能です。<img>でも、このような条件分岐が可能となりましたが、<picture>を使う場合は以下のようになります。

HTML
<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>

<source>に関連するHTMLタグ

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