The <source> tag in HTML is used to specify multimedia files like <audio>, <video>, and <picture>. It utilizes attributes like src
and type
for defining the source URL and also enables the inclusion of different file formats for compatibility across browsers.
It is a void element, which means that it has no content and does not require a closing tag. The <source>
tag also supports the Global Attributes and Event Attributes in HTML.
Syntax:
<source src=" " type="">
// Statements
</source>
Attributes:
Attribute | Description |
---|---|
src | It holds the path of media content. |
media | It defines the type of the media content. |
srcset | It specifies the URL of the image used in different situations. |
sizes | It specifies the sizes of images in different page layouts. |
type | It specifies the MIME-type resource. |
height | Intrinsic image height in pixels (only for <picture>). |
width | Intrinsic image width in pixels (only for <picture>). |
Example 1: This example uses <source> tag with the video media file.
<!DOCTYPE html> < html >
< head >
< title >
HTML source Tag
</ title >
</ head >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >
HTML < source > Tag
</ h2 >
< video width = "400" height = "350" controls>
< source src = "video.mp4" type = "video/mp4" >
< source src = "video.ogg" type = "video/ogg" >
</ video >
</ body >
</ html >
|
Output:
Example 2: This example uses <source> tag with the audio media files.
<!DOCTYPE html> < html >
< head >
< title >
HTML source Tag
</ title >
</ head >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >
HTML < source > Tag
</ h2 >
< audio controls>
< source src = "audio.mp3" type = "audio/mp3" >
</ audio >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome 3
- Edge 12
- Firefox 3.5
- Opera 15
- Safari 3.1