HTML5
How to Specify the URL of the Media File in HTML5?
There are two ways to point an HTML5 <audio> or <video> element at a media file: use the src attribute directly on the element, or nest one or more <source> elements inside it. The <source> approach lets you offer multiple formats for wider browser support.
Method 1: The src Attribute
The simplest way is to set the src attribute on the <audio> or <video> tag itself. Use this when you only need to provide a single file format.
<audio src="song.mp3" controls></audio>
<video src="movie.mp4" controls width="640"></video>Method 2: The <source> Element
Nest one or more <source> elements inside the media tag to provide multiple formats. The browser reads them top to bottom and plays the first format it supports. The type attribute helps it choose without downloading each file.
<video controls width="640">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>Which Should You Use?
| Approach | Best for |
|---|---|
| src attribute | A single format that all target browsers support. |
| <source> elements | Offering multiple formats/codecs for maximum compatibility. |
If both a src attribute and <source> children are present, the src attribute takes priority and the <source> elements are ignored. Use one method, not both.