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:
<!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.
<!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.
Example 3: In the case of videos use <video> tag and within it set multiple <source> tags to add multiple video resources.
<!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 :