Description
The HTML element <source>
is used to define multiple alternative media resources for the media elements like <audio>
, <video>
, and <picture>
.
The media resource can be audio, video, or an image file.
The media elements will choose the first matching resource when multiple resources are defined.
The below table summarizes its usage.
Usage Details | |
Placement | It is a child of any of the media elements like <audio> , <video> , or <picture> . |
Contents | None. It is an empty element. |
Tags | Opening tag: required; Closing tag: forbidden |
Versions | HTML 5 |
Syntax
Here is the basic syntax of the <source>
element.
<source src="URL">
Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example - HTML Element source</title>
</head>
<body>
<audio controls>
<source src="/assets/audios/music.mp3" type="audio/mpeg">
<source src="/assets/audios/music.wav" type="audio/wav">
<source src="/assets/audios/music.ogg" type="audio/ogg">
Oops!! Your browser does not support audio element.
</audio>
</body>
</html>
Attributes
The following table shows the list of supported and unsupported attributes for the <source>
element.
Attribute Type | Details |
Element-Specific Attributes | The tag <source> has some element-specific attributes listed in the below table. |
Global Attributes | Like all other HTML tags, the tag <source> supports the HTML Global Attributes. |
Event Attributes | The tag <source> also supports the HTML Event Attributes. |
Here is a list of attributes that are specific to the <source>
element.
Attribute | Value | Required | Description |
src |
URL | Yes | Specifies the URL of the media file. |
media |
media-query | No | Specifies the type of the media resource i.e. what media or device the file is intended for. See CSS media types for more details. |
type |
media-type | No | Specifies the media type of the media resource. |
Browser Compatibility
The tag <source>
is supported in all modern browsers.
- Google Chrome 4+
- Internet Explorer or Edge 9+
- Firefox 3.5+
- Apple Safari 4+
- Opera 10.5+