HTML Tags
HTML <source> Tag
The
<source>tag is used to define multiple media resources for the<audio>and<video>elements.
It allows the browser to choose the best supported format automatically, ensuring better playback compatibility across devices.
Syntax
html
<source src="file.mp4" type="video/mp4">Attributes
| Attribute | Description | Example |
|---|---|---|
| src | Specifies the path (URL) of the media file. | src="movie.mp4" |
| type | Defines the MIME type of the file to help browsers identify the format. | type="video/mp4" |
| media | Specifies media query conditions (like screen size) for selecting this file. | media="(min-width: 800px)" |
| sizes | Specifies image sizes for responsive designs (used in <picture>). | sizes="(max-width: 600px) 480px, 800px" |
| srcset | Specifies multiple image sources for different resolutions (used in <picture>). | srcset="image-480.jpg 480w, image-800.jpg 800w" |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source Tag Example</title>
</head>
<body>
<h2>Example: Using <source> inside <video></h2>
<video width="640" height="360" controls>
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<h2>Example: Using <source> inside <audio></h2>
<audio controls>
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>Output
Browser Output
html
When used inside <audio> or <video>, the browser automatically picks the first supported file format and plays it.
Use our Try It Editor to see how browsers select media formats dynamically.Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <source> tag is fully supported in all major browsers starting from Internet Explorer 9.
It ensures media elements remain functional even when certain formats aren’t supported.
Notes
- Always include at least two
<source>elements for best compatibility (e.g., MP4 + WebM for videos). - Browsers read
<source>elements from top to bottom and stop when they find the first supported format. - The
<source>tag does not display anything by itself - it must be nested inside<video>,<audio>, or<picture>.
Conclusion
The <source> tag improves the flexibility and compatibility of media elements by letting developers provide multiple file formats.
It ensures that users across all browsers and devices can play the same content smoothly without additional plugins.