The <source> tag in HTML is used to attach multimedia files like audio, video and pictures. The <audio>, <video> and <picture> elements contain the <source> element.
Syntax:
<source src="" type="">
// Statements
</source>
Attributes: This tag contains five attributes as mentioned above and described below:
- src: It is used to hold the path of media content.
- media: It is used to define the type of the media content.
- srcset: It is used to specify the URL of image used in different situations.
- sizes: It is used to specify the sizes of image in different page layout.
- type: It is used to specify the MIME-type resource.
Below examples illustrate the <source> tag in HTML:
Example 1: This example uses <source> tag with the video media file.
html
<!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.
html
<!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: The browsers supported by HTML <source> Tag are listed below:
- Google Chrome
- Edge 12
- Internet Explorer 9.0
- Firefox 3.5
- Safari
- Opera