HTML要素辞書 by Sentaro

<source>

メディアソース要素。<picture>、<video>、<audio>要素内で、複数のメディアリソースを指定するために使用されます。

info

概要

<source> 要素は、主に **メディア要素** (<video> や <audio>) や **画像要素** (<picture>) の子要素として使用されます。ブラウザがユーザーの環境（ブラウザ、画面サイズ、ネットワーク速度など）に応じて、最も適切なメディアファイルを選択できるように、複数の代替メディアリソースを指定することができます。
この要素自体は空要素であり、終了タグは必要ありません。

play_circle

デモ (静的表示)

HTML (Source)

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

Preview (Result)

[このプレビューは静的であるため、
オーディオコントロールは表示されていません。]

list

属性 (Attributes)

属性名	説明
src	リソースのURL。指定されたメディアファイルへのパス（必須）。
type	リソースのMIMEタイプ。ブラウザが再生できるかどうかを事前に確認するために利用されます。例: `video/mp4`, `audio/ogg`。
media	メディアクエリ（CSSのMedia Queryと同じ構文）。このリソースが適用されるべき条件を指定します。主に`<picture>`内でレスポンシブな画像切り替えに使用されます。
srcset	`<picture>` 要素内でのみ使用されます。複数の画像候補URLと、それぞれの画像サイズや画素密度をブラウザに伝えます。
sizes	`<picture>` 要素内でのみ使用されます。ビューポートサイズに応じて画像が占めるであろうスロットサイズを示します。

code

実用例

1. 異なるフォーマットの動画ファイルの提供

<video controls width="600">
 <source src="movie.webm" type="video/webm">
 <source src="movie.mp4" type="video/mp4">
 <p>動画を再生できません</p>
</video>

// ブラウザは上から順に読み込み、最初にサポートしているフォーマットを再生します。

2. 画面サイズによるレスポンシブな画像切り替え (<picture>要素)

<picture>
 <source media="(max-width: 600px)" srcset="small.jpg">
 <source media="(max-width: 1200px)" srcset="medium.jpg">
 <img src="large.jpg" alt="美しい風景">
</picture>

3. 特定のコーデックの指定

<source 
 src="movie.hevc.mp4" 
 type="video/mp4; codecs=hevc">

// type属性にコーデック情報を含めることで、ブラウザはより正確に再生可否を判断できます。

lightbulb

知っておくべき重要事項

priority_high

<source>要素の配置順序
ブラウザは、親要素（<video>, <audio>, <picture>）内の <source> 要素を**記述された順に**チェックします。最初にサポート可能なリソースが見つかった時点で、そのリソースが採用されます。したがって、最も推奨される、またはファイルサイズの小さいフォーマットを先に記述することが推奨されます。

accessibility_new

フォールバックコンテンツ
<video> や <audio> 要素内に <source> が指定されていても、どのファイルも再生できなかった場合に備えて、**要素の直後**にフォールバックコンテンツ（例: 「動画を再生できません」「音声ファイルへのリンク」）を必ず含めるようにしましょう。

私について利用規約プライバシーポリシー