如何为 HTML5 中的元素设置多个媒体资源？

任务是为媒体元素设置多个媒体资源。我们可以在媒体标签中使用多个源标签。

句法：

  
  <-- Example 1 -->
   
  <-- Example 2 -->
  

在上面的语法中，媒体元素可以是图片、视频、音频。根据您的需要使用。

示例 1：

HTML

  

    

  

  
    
The picture element
  
    
Resize the browser window to change different images.
    
        
        
        
    
  

  

输出：对于 标签内的图像，我们可以使用 标签后跟 2 个属性 – ‘media’ 和 ‘srcset’。其中 media 属性用于检查浏览器窗口的分辨率， srcset 用于设置图像。

示例 2：在音频的情况下，使用

HTML

  

    

  

    

        
Set up multiple media resources for audios:
        

            
        
    

  

输出：这里我们设置了多个资源，正如您在代码库中看到的那样，但浏览器已经是最新的，它正在播放第一个音频示例。如果浏览器不支持它，它将跳转到下一个资源并尝试播放。

在 HTML5 中设置多个音频资源 – GfG

示例 3：在视频的情况下，使用

HTML

  
    
Adding Video on my webpage
  
    

      
    
  

输出 ：