HTML <source> タグ

定義と使用方法

<source> タグは、メディア要素（例えば、 <video>、<audio> および <picture>）を指定して複数のメディアリソースを指定します。

<source> タグは、ブラウザのサポートに応じてまたはビューポートの幅に応じて代替のビデオ/オーディオ/画像ファイルを指定することができます。ブラウザはサポートする最初のものを選択します。 <source>。

参照も：

HTML チュートリアル：HTML ビデオ

HTML チュートリアル：HTML オーディオ

HTML DOM リファレンスマニュアル：ソースオブジェクト

インスタンス

例 1

これは二つのオーディオソースファイルを持つオーディオプレイヤーです。ブラウザはサポートする最初のものを選択します。 <source>：

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  あなたのブラウザは audio タグをサポートしていません。
</audio>

自分で試してみてください

例 2

<video> 内で使用 <source> ビデオを再生：

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  あなたのブラウザは video タグをサポートしていません。
</video>

自分で試してみてください

例 3

<picture> 内で使用 <source> ビューポートの幅に応じて異なる画像を定義するために使用されます：

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

自分で試してみてください

属性

属性 値 説明
media メディアクエリ すべての有効なメディアクエリを受け入れ、通常 CSS で定義されます。
sizes 異なるページレイアウトに画像のサイズを指定します。
src URL

メディアファイルの URL を指定するために使用されます。

当 <source> 用い <audio> と <video> に適用される場合、この属性は必須です。
srcset URL

異なる状況で使用する画像のURLを指定します。

pictureでのsourceを使用する場合、この属性は必須です。
type MIMEタイプ リソースのMIMEタイプを指定します。

グローバル属性

<source> タグは以下をサポートしています HTMLでのグローバル属性。

イベント属性

<source> タグは以下をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

なし。

ブラウザのサポート

この表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5