<source>
<source> は HTML の要素で、<picture>、<audio>、<video> の各要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、すなわち中身も閉じタグもありません。画像ファイル形式やメディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 3 | 12 | 3.5 | 3.1 | 18 | 2 | |
| HTML 属性 | ||||||
height | 90 | 90 | 108 | 15 | 90 | 15 |
media | 3 | 12 | 15 | 3.1 | 18 | 2 |
src | 3 | 12 | 3.5 | 3.1 | 18 | 2 |
type | 3 | 12 | 3.5 | 3.1 | 18 | 2 |
width | 90 | 90 | 108 | 15 | 90 | 15 |
注釈 1件
実装メモ
- 詳細はバグ 449363 を参照してください。
注釈 1件
実装メモ
- media` は `<picture>`, `<audio>`, `<video>` 内の `<source>` でサポートされている。Firefox 53-119 では、`media` は `<picture>` 内の `<source>` でのみサポートされています。
基本構文
HTML
<video controls>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="画像">
</picture>ライブデモ
Picture source selection
Use source inside picture to pick assets based on layout conditions.
プレビュー全画面表示
Audio and video source markup
Illustrate how multiple source elements sit under a media element.
プレビュー全画面表示
実務での使いどころ
-
<source> の活用
<source> は HTML の要素で、<picture>、<audio>、<video> の各要素に対し、複数のメディアリソースを指定します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。