HTML media sources allow you to specify the audio or video files that a browser can play on a web page. By using the <source> element, you can provide one or more media files and let the browser select a format it supports.
This is useful when building websites with music players, video tutorials, online courses, and other multimedia content.
What Is the HTML Source Element?
The HTML <source> element specifies a media resource for elements such as <audio> and <video>. It is a void element, which means it does not require a closing tag.
Here is a simple example:
<video controls width="500">
<source src="tutorial.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>In this example, src specifies the video file, while type identifies its media format.
You can learn more about embedding multimedia in our HTML Media tutorial.
Using Multiple Media Sources
Different browsers may support different media formats and codecs. You can provide multiple sources so the browser can try them in order.
<video controls width="500">
<source src="lesson.webm" type="video/webm">
<source src="lesson.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>The browser checks the sources in order and uses a resource it can play. If it cannot play the first source, it can try the next one.
Providing multiple sources can improve compatibility, but the files must actually exist and contain supported codecs.
Using Source with HTML Audio
You can use multiple <source> elements inside an <audio> element as well.
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support HTML audio.
</audio>The browser tries the audio sources in the order provided. MP3 is widely supported, while other formats may be useful as alternatives.
Explore our HTML Audio tutorial for more examples of adding sound to a web page.
Important Attributes of the Source Element
The <source> element supports several attributes, depending on how it is used.
| Attribute | Purpose |
|---|---|
src | Specifies the media file URL |
type | Identifies the media MIME type |
media | Specifies media conditions for selecting a source, commonly with <picture> |
The src and type attributes are commonly used with audio and video. The media attribute is particularly useful with responsive images inside the <picture> element.
Example:
<video controls>
<source src="demo.mp4" type="video/mp4">
<source src="demo.webm" type="video/webm">
</video>Using Correct File Paths
A media source must point to the correct file location. If your HTML file and video are in the same folder, you can use a relative path:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>If the video is stored inside a folder named media, use:
<video controls>
<source src="media/video.mp4" type="video/mp4">
</video>If a media file does not load, check the file name, folder path, server permissions, and file format.
Best Practices for HTML Media Sources
Follow these practices when adding media sources:
- Use the correct MIME type for each format.
- Provide alternative sources when browser compatibility requires them.
- Compress audio and video files to improve loading speed.
- Use valid file paths and verify that files are accessible.
- Avoid adding unnecessary duplicate sources.
- Test playback across browsers and mobile devices.
For related tutorials, explore HTML Video, HTML Audio Controls, and HTML Video Controls.