The task is to set multiple media resources for the media element. We can use multiple source tags in the media tag.
Syntax:
<media_element>
<source src="geeksforgeekslogo.resourse_extension">
<-- Example 1 -->
<source src="hpnotebook.jpg">
<-- Example 2 -->
<source src="earth_from_moon.mp4">
</media_element>
In the above syntax, the media elements can picture, video, audio. Use as per your needs.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
</head>
<body>
<h1>The picture element</h1>
<p>Resize the browser window to change different images.</p>
<picture>
<source media="(min-width:650px)"
srcset=
<source media="(min-width:465px)"
srcset=
<img src=
alt="Geeks for Geeks"
style="width:auto;">
</picture>
</body>
</html>
|
Output: In the case of images within the <picture> tag, we can use the <source> tag followed by 2 attributes are — ‘media’ and ‘srcset’. Where media attribute is used to check the resolution of the browser window and srcset is used to set image.
Example 2: In the case of audio use <audio> tag and within it set multiple <source> tags to add multiple audio resources.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Multiple Audio Resources</title>
</head>
<body>
<div>
<h2>Set up multiple media resources for audios:</h2>
<div>
<audio controls>
<source src="GFG.mp3">
<source src="GFG.wav">
Sorry!! Your browser doesn't support the
<code>audio</code> element.
</audio>
</div>
</div>
</body>
</html>
|
Output: Here we set multiple resources as you can see in the codebase, but the browser is already up-to-date it’s playing the first audio example. In case it is not supported by the browser then it’ll jump to the next resource and try to play.
setup multiple audio resources in HTML5 – GfG
Example 3: In the case of videos use <video> tag and within it set multiple <source> tags to add multiple video resources.
HTML
<!DOCTYPE html>
<html>
<body>
<p>Adding Video on my webpage</p>
<p>
<video width="400" height="350" autoplay>
<source src="myvid.mp4" type="video/mp4" />
<source src="myvid.ogg" type="video/ogg" />
</video>
</p>
</body>
</html>
|
Output :
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Apr, 2021
Like Article
Save Article