HTML <source>用法及代码示例

HTML中的<source>标记用于附加多媒体文件，例如音频，视频和图片。 <audio>，<video>和<picture>元素包含<source>元素。

用法:

<source src="" type=""> 
    // Statements
</source>

属性：该标签包含上述和以下所述的五个属性：

src:它用于保留媒体内容的路径。
type:它用于定义媒体内容的类型。
srcset:用于指定在不同情况下使用的图像的URL。
sizes:用于指定不同页面布局中图像的尺寸。
type:用于指定MIME-type资源。

以下示例说明了HTML中的<source>标记：

范例1：本示例将<source>标记与视频媒体文件一起使用。

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        HTML source Tag 
    </title> 
</head> 
  
<body>  
    <h1 style="color:green;">GeeksforGeeks</h1> 
      
    <h2>HTML <source> Tag</h2> 
      
    <video width="400" height="350" controls>  
        <source src="video.mp4" type="video/mp4">  
        <source src="video.ogg" type="video/ogg">  
    </video>  
</body>  
  
</html>

输出：

范例2：本示例对音频媒体文件使用<source>标签。

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        HTML source Tag 
    </title> 
</head> 
  
<body>  
    <h1 style="color:green;">GeeksforGeeks</h1> 
      
    <h2>HTML <source> Tag</h2> 
      
    <audio controls>  
        <source src="audio.mp3" type="audio/mp3"> 
    </audio>  
</body>  
  
</html>

输出：

支持的浏览器：下面列出了HTML <source>标签支持的浏览器：

谷歌浏览器4.0
Internet Explorer 9.0
Firefox 3.5
Safari 4.0
Opera 10.5

相关用法

注：本文由纯净天空筛选整理自skyridetim大神的英文原创作品 HTML | <source> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。