Open In App
Related Articles

How to set multiple media resources for elements in HTML5 ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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 :

Last Updated : 07 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads