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 |
