HTML <source>Tag
Examples
An audio player with two source files. The browser needs to select the source file it supports (if it supports both, it can choose either one):
<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 »
Browser Support
The numbers in the table specify the first browser version that fully supports the tag.
| Tag | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Definition and Usage
The <source> tag defines media resources for media elements (such as <video> and <audio>).
The <source> tag allows you to specify two video/audio files for the browser to choose from based on its support for media types or codecs.
Differences Between HTML 4.01 and HTML5
The <source> tag is new in HTML5.
Attributes
New: New attribute in HTML5.
| Attribute | Value | Description |
|---|---|---|
| mediaNew | media_query | Specifies the type of media resource, for the browser to decide whether to download it. |
| srcNew | URL | Specifies the URL of the media file. |
| type | MIME_type | Specifies the MIME type of the media resource. |
| sizes | Set different image sizes for different page layouts. | |
| srcset | URL | When <source> is applied to the <picture> tag, it is needed. It specifies the image URL to use under different conditions. |
More Examples
Examples
Use <source> in the <video> tag to set up 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 »
Examples
Use <source> in the <picture> tag to set images for different screens:
<picture>
<source media="(min-width:650px)" srcset="/static.jyshare.com/images/example-logo.png">
<source media="(min-width:465px)" srcset="/static.jyshare.com/images/code-icon-script.png">
<img src="/static.jyshare.com/images/mix/hjkg_icon.png" style="width:auto;">
</picture>
Try it Yourself »
Global Attributes
The <source> tag supportsthe HTML Global Attributes。
Event Attributes
The <source> tag supportsthe HTML Event Attributes。
Other Extensions