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.
<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.
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.
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.