<source> Media source
One alternative file inside picture, audio or video.
<source> is a void element naming one alternative file. In a <picture> it takes srcset, media and type. In <audio> or <video> it takes src and type.
Sources are tried in order, and the first one the browser can play or match wins. Put your best format at the top. With type set, the browser skips formats it does not support without downloading anything.
The source element in the HTML Living Standard (opens in a new tab) sets out how its attributes change between picture, video and audio. A working example is in the Audio and Video lesson.
Void element: it has no content and no closing tag.
Syntax
<video controls>
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
</video>When to use it
One media item, more than one file: that is when you need <source>. For video and audio it usually means a small modern format such as WebM or Opus next to an MP4 or MP3 that plays everywhere. Inside picture it means AVIF or WebP versions of an image, or different crops picked by a media query.
With only one file, skip source. Put src straight on the video, audio or img; it is shorter and behaves the same.
A video or audio element chooses its source once, at load time. Resize the window later or change the source elements from a script and the playing file stays put until the script calls the element's load() method. You can also add a codecs parameter to type. Then the browser can rule out a file whose container it knows but whose codec it can't decode.
Attributes
| Attribute | What it does |
|---|---|
src | File URL (in audio and video). |
type | MIME type, such as video/webm or image/avif. |
srcset | Image candidates (in picture). |
sizes | Display sizes for srcset (in picture). |
media | Media query that must match (in picture). |
width | Image width (in picture). |
height | Image height (in picture). |
Live example
Edit the code and watch the preview.
<video controls width="320">
<source src="flower.webm" type="video/webm">
<source src="flower.mp4" type="video/mp4">
Your browser cannot play this video.
</video>More examples
Podcast in two audio formats
The browser plays the Opus file when it can and the MP3 when it can't. preload="none" means nothing downloads before someone presses play. Players that can't handle audio at all show the download link.
<audio controls preload="none">
<source src="episode-12.opus" type="audio/ogg; codecs=opus">
<source src="episode-12.mp3" type="audio/mpeg">
<a href="episode-12.mp3">Download episode 12 (MP3)</a>
</audio>Picture sources by width
The browser takes the first source that matches, so the widest media query is listed first. A wide preview shows the mountains and a medium one the dog. Narrow previews fall back to the cat in the img.
<picture>
<source media="(min-width: 800px)" srcset="mountains.svg">
<source media="(min-width: 450px)" srcset="dog.svg">
<img src="cat.svg" alt="Illustration that changes with the screen width" width="400" height="300">
</picture>Tip: Set type and the browser skips formats it cannot play.
Browser support
All browsers support source inside picture, video and audio. Which files play is another matter. MP4 with H.264 and MP3 work everywhere. WebM works in all current major browsers, with some limits in older Safari versions; the WebM support table (opens in a new tab) shows which.
Accessibility
source produces no accessible output itself. In a picture the alt text sits on the img, and captions come from a track element, which the W3C note Understanding Captions (Prerecorded) (opens in a new tab) requires.
Common mistakes
Wrong
<picture>
<source src="photo.webp">
<img src="photo.jpg" alt="Photo">
</picture>Right
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Photo">
</picture>Inside picture, the attribute is srcset.
Frequently asked questions
In what order should source elements go?
Most preferred first. The browser uses the first <source> it can handle and ignores everything after it. For images, AVIF goes before WebP and the img holds the JPEG fallback. For video, lead with the most efficient format. Give each one a type attribute so unsupported files are skipped without being downloaded.
What attributes does source use in picture versus video?
In <picture>, source needs srcset and can also take sizes, media, type, width and height. In <video> or <audio> it takes src and type. Mix them up, say src inside picture, and the browser ignores that source. Valid type values are the registered media types listed by IANA (opens in a new tab).
Practise it
- Audio and Video (Module 3: Links and Media)