HTML - source 标签

HTML <source> 标签是一个空元素。它表示没有结束标签和标签中的任何内容。它用于定义不同格式的各种媒体资源，例如音频、视频和图像。为了确保最佳的跨浏览器兼容性，这一点很重要。

浏览器可以从它支持的可用格式中进行选择，并毫无问题地播放音乐和视频文件。在单个文档中，可以多次使用 <source> 元素来指定各种格式的备用音频、视频和图像文件。

如果 <source> 标签是 <audio> 或 <video> 标签的一部分，则它应位于 <track> 标签之前和媒体文件之后。如果它包含在 <picture> 标签中，则必须位于 <img> 标签之前。

语法


<source src=" " type=" ">

属性

<source> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出。

属性	值	描述
media	media_query	指定媒体资源的类型。
sizes		指定在 <picture> 元素上使用时的大小。
src	URL	指定媒体文件的 URL。
srcset	URL	指定在 <picture> 元素上使用媒体文件的 URL。
type	MIME-type	媒体资源的媒体类型
height	pixel	指定在 <picture> 元素上使用时媒体的高度。
width	pixel	指定在 <picture>元素上使用时媒体的宽度。

<source> 标签示例

下面的示例将说明源标签的用法。在何处、何时以及如何使用源标签。

在<video>上使用<source> 标签

以下示例，我们将在 <video> 中使用 <source> 标签来播放视频。


<!DOCTYPE html>
<html>
<body>
   <video width="250" height="150" controls>
      <source src="https://player.vimeo.com/external/415068616.hd.mp4?s=e6dc106b7cccb956aa1d00d705e440977290df18&profile_id=174&oauth2_token_id=57447761.mp4" type="video/mp4">
   </video>
</body>
</html>

在<audio>上使用<source> 标签

考虑另一种情况，我们将在 <audio> 中使用 <source> 标签来播放音频。


<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
   </audio>
</body>
</html>

在图片元素上使用<source> 标签

让我们看另一个示例，我们将在 <picture> 中使用 <source> 标签来根据视口宽度加载不同的图像。当用户最小化窗口时，首先显示的图像会发生变化并显示另一个图像。


<!DOCTYPE html>
<html>
<body>
   <p>When You minimize the window it loads different image on the webpage.</p>
   <picture>
      <source media="(min-width:651px)" 
                 srcset="/sql/images/sql-mini-logo.jpg">
      <source media="(min-width:464px)" 
                 srcset="/html/images/html-mini-logo.jpg">
      <img src="/sql/images/sql-mini-logo.jpg" alt="Flowers" style="width:auto;">
   </picture>
</body>
</html>

支持的浏览器

浏览器
<source>	4.0	9.0	3.5	4.0	10.5

打印本页