sourceタグ -複数のフォーマットのメディアファイルを指定する｜HTML辞典

<source>タグとは？

<source> タグは、<video> や <audio> タグ内で、複数のフォーマットのメディアファイルを指定するためのタグ です。
ブラウザが対応しているフォーマットを自動的に選択し、適切なメディアを再生します。

基本情報

コンテンツモデル

メディア要素の子要素としてのみ使用可能（<video> または <audio> の内部）。

閉じタグの有無

<source> は単独タグ（空要素）のため、閉じタグ（</source>）は不要です。

基本的な記述方法（動画）

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    お使いのブラウザは動画タグをサポートしていません。
</video>

基本的な記述方法（音声）

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    お使いのブラウザはオーディオ要素をサポートしていません。
</audio>

使用できる主な属性

<source> タグには重要な属性がいくつかあります。

属性名	説明	例
src	メディアファイルのURLを指定	<source src="video.mp4">
type	メディアのMIMEタイプを指定	<source src="video.mp4" type="video/mp4">
media	メディアの適用条件（CSSのメディアクエリと同様）	<source src="video-hd.mp4" media="(min-width: 800px)">

CSSを使ったデザイン変更

<source> タグ自体はスタイルを適用できませんが、親要素の <video> や <audio> にスタイルを適用できます。

video, audio {
    width: 100%;
    max-width: 640px;
    border-radius: 10px;
}

適切な使用例

✅ 複数の動画フォーマットを指定する

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    お使いのブラウザは動画タグをサポートしていません。
</video>

✅ 複数の音声フォーマットを指定する

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>

✅ media 属性を使用して特定の画面サイズで異なる動画を提供する

<video controls>
    <source src="video-small.mp4" media="(max-width: 600px)">
    <source src="video-large.mp4" media="(min-width: 601px)">
</video>

適切でない使用例（誤った使い方）

❌ <source> を <video> や <audio> の外に記述するのはNG

<!-- NG: <source> を <video> の外に記述 -->
<source src="video.mp4" type="video/mp4">
<video controls></video>

✅ 正しい書き方（<video> の内部に <source> を記述）

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

❌ src を指定しないのはNG

<!-- NG: src属性なし -->
<video controls>
    <source type="video/mp4">
</video>

✅ 正しい書き方（src を指定）

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<source>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<source>	メディアのソースを指定	<video> や <audio> 内で使用	互換性向上のための複数フォーマット指定
<video>	動画を再生	controls でプレイヤー表示	動画コンテンツの埋め込み
<audio>	音声を再生	controls でプレイヤー表示	BGM、音声コンテンツの埋め込み
<iframe>	外部コンテンツの埋め込み	YouTubeなどの動画埋め込み	外部プレイヤーの利用

使用上の注意点

✅ <source> は <video> または <audio> 内でのみ使用する

• 単独では機能しないため、必ず適切な親要素の中に記述する。

✅ type 属性を指定して、ブラウザが最適なフォーマットを選択できるようにする

• 例：type="video/mp4"、type="audio/ogg" など。

✅ media 属性を活用して、デバイスの条件に応じたメディアを提供する

• 例：media="(min-width: 800px)" を使用して、画面サイズに応じた動画を切り替える。

関連タグ

• <video> – 動画の埋め込み
• <audio> – 音声の埋め込み
• <track> – 字幕ファイルの追加

まとめ

<source>タグは、HTML文書内で <video> や <audio> の中でメディアファイルを指定するためのタグ です。
複数のフォーマットを提供することで、ブラウザの互換性を向上させることができます。