Skip to content
Related Articles

Related Articles

Improve Article
How to set multiple media resources for elements in HTML5 ?
  • Last Updated : 07 Apr, 2021

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 :




My Personal Notes arrow_drop_up
Recommended Articles
Page :