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>要素は、メディア関連の要素（<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属性type属性ポイント
audio/mpeg）が広くサポートされていますが、一部のブラウザはOGG（audio/ogg）を好むものもあり、2つの形式を用意するとより多くの環境で再生しやすくなります。type属性を付けるとブラウザが形式を迅速に判断でき、効率が良くなる場合があります。<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>ポイント
レスポンシブデザインの普及に伴い、画像を端末ごとに切り替える仕組みとして<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属性<source>を使うsrcset属性2xや3xといった画像を指定できる<img>要素<picture>をサポートしないブラウザで表示する画像を指定するポイント
<source src="path/to/media.mp4">video/mp4、audio/mpeg、image/webpなど）。type属性を参照して、ファイルをダウンロードする前にサポートしているかどうかを判断できる場合があるため、パフォーマンス面・互換性面で役立つ。<picture>要素の中で画像を切り替える際によく使われる属性。CSSのメディアクエリと同じ記法で、画面サイズや解像度などの条件を指定し、条件に合致した場合のみそのソースを適用する。<source media="(min-width: 800px)" srcset="large.jpg 1x, large-2x.jpg 2x">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><audio>や<video>、<picture>などは、対応していないブラウザのためにフォールバックコンテンツを記述できます。例えば<audio>や<video>では、<source>要素の後ろにブラウザがタグ自体をサポートしていない場合に表示されるテキストや画像を入れることができます。
HTML
<video controls>
<source src="video.mp4" type="video/mp4">
<!-- ブラウザ非対応時に表示させるフォールバック -->
<p>お使いのブラウザでは動画を再生できません。代替コンテンツをご覧ください。</p>
</video><picture>の場合は、最後に書かれた<img>要素がフォールバックとなり、対応していないブラウザで表示される仕組みです。
<source>要素をサポートしており、音声・動画・画像の複数ソース指定が可能です。<audio>や<video>自体をサポートしないものもありますが、年々対応状況は改善され続けています。HTML5が登場した初期のころよりは格段にサポート率が高まっています。<source>要素で複数のファイルを指定する際、単に形式を変えるだけでなく、エンコード設定の最適化や圧縮を検討することで、ページ読み込み速度の改善が見込めます。特に動画や高解像度の画像はファイルサイズが大きくなりがちなので注意が必要です。
一部の環境では、動画の自動再生（autoplay）が規定によって制限されているため、muted属性を併用する必要がある場合があります。ブラウザによっては、音声を含む自動再生をブロックするため、以下のような設定が必要です。
HTML
<video autoplay muted loop>
<source src="autoplay-video.mp4" type="video/mp4">
</video>モダンブラウザでは<video>要素をより高度に活用できます。例えばPicture-in-Picture (PiP) で小さなウィンドウとして動画を再生し続けたり、**再生速度（playbackRate）**を変更したりする機能がサポートされていますが、これはJavaScript API側の話が中心なので、<source>要素としての設定は同じです。必要に応じてJavaScriptから制御を行うと便利です。
<source>要素が必須になります。<picture>要素＋<source>を使います。一方で単純に1種類の画像だけを表示すれば済む場合は、<img>要素にsrcを記述するシンプルな方法が適しています。<picture>要素を使う場合でも、最後に記述する<img>要素のalt属性が重要です。alt属性を正しく使うことで、検索エンジンやスクリーンリーダーが画像の意味を理解しやすくなります。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>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><source>要素は、複数のメディアソースを用意してブラウザに最適なファイルを選ばせるために必須の要素です。type属性やmedia属性、srcset属性などを適切に組み合わせることで、より柔軟かつ効率的にメディアを扱うことができます。<audio>や<video>での再生テストを行う。<picture>要素を使った画像の切り替えを試してみる。