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

📅  最后修改于: 2021-11-09 09:08:50             🧑  作者: Mango

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

句法:


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

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

示例 1:

HTML


  

    

  

  
    

The picture element

       

Resize the browser window to change different images.

                                          


HTML


  

    Multiple Audio Resources

  

    
        

Set up multiple media resources for audios:

        
                     
    
  


HTML


  
    

Adding Video on my webpage

       

           

  


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

示例 2:在音频的情况下,使用

HTML



  

    Multiple Audio Resources

  

    
        

Set up multiple media resources for audios:

        
                     
    
  

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

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

示例 3:在视频的情况下,使用

HTML



  
    

Adding Video on my webpage

       

           

  

输出 :