HTML - <source> 标签

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

浏览器可以从可用的格式中选择它支持的格式，并在没有任何问题的情况下播放音乐和视频文件。在一个文档中，<source> 元素可以多次使用以指定各种格式的备用音频、视频和图像文件。

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

语法

<source src=" " type=" ">

属性

HTML source 标签支持 HTML 的全局和事件属性。以及一些下面列出的特定属性。

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

HTML source 标签示例

下面的示例将说明 source 标签的使用。在哪里、何时以及如何使用 source 标签。

在视频元素上使用 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>

在音频元素上使用 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="https://tutorialspoint.com/sql/images/sql-mini-logo.jpg">
      <source media="(min-width:464px)" 
                 srcset="https://tutorialspoint.com/html/images/html-mini-logo.jpg">
      <img src=
"https://tutorialspoint.com/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

html_tags_reference.htm

打印页面