Yugien - 遊戯苑
テーマ

HTML

この記事では、audio・video・pictureで複数の候補を指定し、ブラウザーに再生・表示できるソースを選ばせるsource要素の基本を初心者向けに説明します。

The <source> element in HTML is used to provide videos, audio, and images in multiple formats and resolutions so that the browser can automatically select and play or display the appropriate source.

source 要素

source要素とは？

<source>要素は、メディア関連の要素（<audio>や<video>、そしてレスポンシブイメージを実現するための<picture>など）において、複数のソースファイルを切り替えるために使用される要素です。

<audio>要素
音声ファイルのソースを指定する
<video>要素
動画ファイルのソースを指定する
<picture>要素
画像ファイルを、デバイスの画面サイズや解像度などに応じて切り替える

例えば、<video>に複数の動画形式を用意し、ブラウザが再生可能な形式を自動的に選んで再生するようにできます。また、<picture>を使うことで、デバイスの画面幅やピクセル密度に応じて最適な画像を配信することも可能になります。

このように、<source>要素は**「最適なメディアをブラウザに提供する」**ために欠かせない仕組みを担っています。

基本的な使い方

<audio>要素と<source>

<audio>要素に音声ファイルを与える最もシンプルな方法は、<audio>自身のsrc属性を使うことですが、複数の音声ファイル形式を用意したい場合は<source>要素を使います。ブラウザは上から順にサポートしている音声形式をチェックし、対応していれば再生を試みます。

例：複数の音声ファイルを指定する

HTML

<audio controls>
	<source src="audio-file.mp3" type="audio/mpeg">
	<source src="audio-file.ogg" type="audio/ogg">
	<!-- Fallback コンテンツ（ブラウザが音声タグをサポートしていない場合に表示） -->
	お使いのブラウザではオーディオを再生できません。
</audio>
controls属性
ブラウザで音声プレーヤーコントロール（再生/一時停止ボタンやボリューム調節など）を表示する
src属性
ソースファイルのURL
type属性
MIMEタイプを指定することで、ブラウザがファイル形式を判断しやすくなる

ポイント

<video>要素と<source>

<video>要素の場合も基本的な使い方は同じです。ただし、動画形式は音声形式よりも互換性に差が出やすいので、複数の形式を用意しておくとより安心です。

例：複数の動画ファイルを指定する

HTML

<video controls width="640" height="360" poster="thumbnail.jpg">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.webm" type="video/webm">
	<!-- Fallback コンテンツ（ブラウザがvideoタグをサポートしていない場合に表示）-->
	お使いのブラウザでは動画を再生できません。
</video>
poster属性
動画が再生される前、または読み込み中に表示されるサムネイル画像
width/height属性
動画の表示サイズをピクセル単位で指定（CSSでコントロールする方法もある）

ポイント

<picture>要素と<source>

レスポンシブデザインの普及に伴い、画像を端末ごとに切り替える仕組みとして<picture>要素が活用されています。この場合の<source>要素はメディアクエリを使った条件分岐や、複数解像度の画像を指定する際に役立ちます。

例：異なる画面サイズで画像を切り替える

HTML

<picture>
	<source
		media="(min-width: 800px)"
		srcset="images/large.jpg 1x, images/large-2x.jpg 2x">
	<source
		media="(min-width: 400px)"
		srcset="images/medium.jpg 1x, images/medium-2x.jpg 2x">
	<!-- 最後に<img>要素でデフォルトの画像を指定 -->
	<img src="images/small.jpg" alt="レスポンシブ画像の例">
</picture>
media属性
CSSのメディアクエリ同様に画面サイズや解像度などの条件を指定し、条件に合致した時にその<source>を使う
srcset属性
高解像度ディスプレイ（Retinaなど）向けに2xや3xといった画像を指定できる
フォールバックとしての<img>要素
条件に合わない場合や、<picture>をサポートしないブラウザで表示する画像を指定する

ポイント

source要素の属性と詳細

src

概要
実際のメディアファイル（音声・動画・画像など）へのパスを指定する。
記述例
<source src="path/to/media.mp4">
注意点
相対パス・絶対パスどちらも使用可能。運用する環境に合わせて正しいパスを指定する必要がある。

type

概要
ソースファイルのMIMEタイプを指定する（例：video/mp4、audio/mpeg、image/webpなど）。
メリット
ブラウザはtype属性を参照して、ファイルをダウンロードする前にサポートしているかどうかを判断できる場合があるため、パフォーマンス面・互換性面で役立つ。
推奨
形式が明確な場合は極力指定する。

media

概要
<picture>要素の中で画像を切り替える際によく使われる属性。CSSのメディアクエリと同じ記法で、画面サイズや解像度などの条件を指定し、条件に合致した場合のみそのソースを適用する。
記述例
<source media="(min-width: 800px)" srcset="large.jpg 1x, large-2x.jpg 2x">
注意点
すべてのソースにメディアクエリが必要なわけではなく、特定の条件に対してのみ使う。

srcset と sizes（画像の場合）

srcset
異なる解像度やサイズの画像を複数指定し、ブラウザに最適なファイルを選択させる仕組み。
sizes
srcsetで指定した画像を実際のレイアウト上どの程度の幅で表示するのかをブラウザに伝える属性。
例

HTML

<picture>
	<source
		srcset="image-400.jpg 400w, image-800.jpg 800w"
		sizes="(max-width: 600px) 400px, 800px">
	<img src="image-400.jpg" alt="">
</picture>
注意点
srcsetとsizesの組み合わせは比較的複雑なので、必要最低限の使い方から慣れていくと良いです。

フォールバックとブラウザ互換性

フォールバックメカニズム

<audio>や<video>、<picture>などは、対応していないブラウザのためにフォールバックコンテンツを記述できます。例えば<audio>や<video>では、<source>要素の後ろにブラウザがタグ自体をサポートしていない場合に表示されるテキストや画像を入れることができます。

HTML

<video controls>
	<source src="video.mp4" type="video/mp4">
	<!-- ブラウザ非対応時に表示させるフォールバック -->
	<p>お使いのブラウザでは動画を再生できません。代替コンテンツをご覧ください。</p>
</video>

<picture>の場合は、最後に書かれた<img>要素がフォールバックとなり、対応していないブラウザで表示される仕組みです。

ブラウザ互換性

高度な活用方法・ベストプラクティス

メディアファイルの最適化

<source>要素で複数のファイルを指定する際、単に形式を変えるだけでなく、エンコード設定の最適化や圧縮を検討することで、ページ読み込み速度の改善が見込めます。特に動画や高解像度の画像はファイルサイズが大きくなりがちなので注意が必要です。

自動再生・ミュート設定（動画の場合）

一部の環境では、動画の自動再生（autoplay）が規定によって制限されているため、muted属性を併用する必要がある場合があります。ブラウザによっては、音声を含む自動再生をブロックするため、以下のような設定が必要です。

HTML

<video autoplay muted loop>
	<source src="autoplay-video.mp4" type="video/mp4">
</video>
autoplay
ページ読み込み時に自動的に動画を再生
muted
音声をミュート（多くのブラウザで自動再生を行うために必須の場合あり）
loop
動画が終了したら再度最初から再生

Picture-in-Picture (PiP) や再生速度の制御

モダンブラウザでは<video>要素をより高度に活用できます。例えばPicture-in-Picture (PiP) で小さなウィンドウとして動画を再生し続けたり、**再生速度（playbackRate）**を変更したりする機能がサポートされていますが、これはJavaScript API側の話が中心なので、<source>要素としての設定は同じです。必要に応じてJavaScriptから制御を行うと便利です。

<source>を使うタイミングの見極め

SEO（検索エンジン最適化）の観点

サンプルコード集

動画・音声の複数形式サポート

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Source要素のサンプル - 動画と音声</title>
</head>
<body>

	<!-- 音声サンプル -->
	<h1>音声の複数ソース指定例</h1>
	<audio controls>
		<source src="audio-example.mp3" type="audio/mpeg">
		<source src="audio-example.ogg" type="audio/ogg">
		お使いのブラウザでは音声を再生できません。
	</audio>

	<!-- 動画サンプル -->
	<h1>動画の複数ソース指定例</h1>
	<video controls width="640" height="360">
		<source src="video-example.mp4" type="video/mp4">
		<source src="video-example.webm" type="video/webm">
		お使いのブラウザでは動画を再生できません。
	</video>

</body>
</html>

レスポンシブ画像(picture＋source)

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Source要素のサンプル - レスポンシブ画像</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.sample-image {
		max-width: 100%;
		height: auto;
		}
	</style>
</head>
<body>

	<h1>レスポンシブ画像の例</h1>
	
	<picture>
		<!-- 800px以上の画面幅なら大きな画像を使用 -->
		<source
			media="(min-width: 800px)"
			srcset="images/large.jpg 1x, images/large-2x.jpg 2x">
		<!-- 400px以上なら中サイズ画像 -->
		<source
			media="(min-width: 400px)"
			srcset="images/medium.jpg 1x, images/medium-2x.jpg 2x">
		<!-- 最後にデフォルトのsmall画像 -->
		<img class="sample-image" src="images/small.jpg" alt="レスポンシブ画像サンプル">
	</picture>

</body>
</html>

まとめ

今後のステップ