<source>
The <source> element provides alternative media sources for audio, video, and picture. It lets the browser choose the best supported resource.
Overview
The <source> element provides alternative media sources for audio, video, and picture. It lets the browser choose the best supported resource.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 3 | 12 | 3.5 | 3.1 | 18 | 2 | |
| HTML attribute | ||||||
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+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Notes 1 item(s)
Implementation note
- `media` is supported in `<source>` within `<picture>`, `<audio>`, and `<video>`. In Firefox 53-119, `media` is supported only in `<source>` within `<picture>`.
Syntax
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>Live demo
Picture source selection
Use source inside picture to pick assets based on layout conditions.
PreviewFullscreen
Audio and video source markup
Illustrate how multiple source elements sit under a media element.
PreviewFullscreen
Source strategy table
Summarize common source use cases for picture, audio, and video.
PreviewFullscreen
Use cases
Format fallback
Offer multiple media formats so browsers can select the one they support best.
Responsive variants
Pair source with picture or video to deliver different assets under different conditions.
Cautions
- Multiple sources increase maintenance overhead, so keep the selection strategy simple and intentional.
- The fallback element still needs core attributes such as alt text or controls where relevant.
Accessibility
- Alternative sources should preserve the same essential meaning so captions, transcripts, and labels stay accurate.
Related links
Powered by web-features