The HTML <source> tag is used to specify multiple media resources for elements such as <audio>, <video>, and <picture>. It allows browsers to choose the most suitable file format or media source to display.
- Provides alternative media files for audio, video, and images.
- Helps ensure compatibility across different browsers and devices.
- Commonly used inside <audio>, <video>, and <picture> elements.
Syntax:
<source src="https://www.geeksforgeeks.org/" type="">
// Statements
</source>Attributes
- src : src specifies the path or URL of the media resource.
- media : Defines the media condition or type for which the resource is intended.
- srcset : srcset specifies one or more image URLs for different display situations.
- sizes : Defines the image sizes for different page layouts.
- type : Specifies the MIME type of the media resource.
- height : Sets the intrinsic height of the image in pixels (used with <picture>).
- width : Sets the intrinsic width of the image in pixels (used with <picture>).
Example 1: This example uses <source> tag with the video media file.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML source Tag
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
HTML <source> Tag
</h2>
<!--Driver Code Ends-->
<video width="400" height="350" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: This example uses <source> tag with the audio media files.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML source Tag
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
HTML <source> Tag
</h2>
<!--Driver Code Ends-->
<audio controls>
<source src="audio.mp3"
type="audio/mp3">
</audio>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->