HTML <source> Tag
Example
An audio player with two source files. The browser will choose the first <source> it supports:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The <source> tag is used to specify multiple media resources for media elements, such as
<video>, <audio>,
and <picture>.
The <source> tag allows you to specify alternative video/audio/image
files which the browser may choose from, based on browser support or viewport
width. The browser will choose the first <source>
it supports.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Attributes
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Global Attributes
The <source> tag also supports the Global Attributes in HTML.
Event Attributes
The <source> tag also supports the Event Attributes in HTML.
More Examples
Example
Use <source> within <video> to play a video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
Example
Use <source> within <picture> to define different images based on the viewport width:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Try it Yourself »
Related Pages
HTML tutorial: HTML Video
HTML tutorial: HTML Audio
HTML DOM reference: Source Object
Default CSS Settings
None.
