How to set multiple media resources for elements in HTML5 ?
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="w3wikilogo.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 = "https://media.w3wiki.net/wp-content/uploads/20210324012752/GfG14-300x83.png" > < source media = "(min-width:465px)" srcset = "https://media.w3wiki.net/wp-content/uploads/20210324012751/GfG13.png" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210324013154/GfG16-300x300.jpg" alt = "Beginner for Beginner" 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.
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 :
Contact Us