本文概述
HTML <source>标记用作子元素, 用于为<audio>, <video>和<picture>元素定义多个媒体资源。
它用于以不同的格式（例如mp3, mp4等）提供相同的媒体内容。
当我们嵌入具有相同内容但格式不同的多个资源时, 浏览器可能会选择最兼容的格式并显示或播放该媒体文件。
<source>标记是在HTML5中引入的。
句法
<source src=" " type=" ">以下是有关HTML <source>标记的一些规范
| Display | Inline |
| 开始日期/结束日期 | Empty tag( Only start tag) |
| Usage | Media resource |
例
<!DOCTYPE html>
<html>
<head>
<title>HTML source tag</title>
</head>
<body>
<h2>Example of source tag</h2>
<video controls="controls" height="200" width="300">
<source src="flower.webm" type="video/webm" >
<source src="flower.mp4" type="video/mp4">
Your browser does not support the HTML5 video element.
</video>
</body>
</html>立即测试
输出：
属性
特定于标签的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| media | Media_query | 它确定链接源针对哪种媒体/设备进行了优化。 |
| sizes | 它为不同的页面布局指定可接受的图像尺寸。 | |
| src | 它确定媒体文件的URL。 | |
| srcset | 指定不同情况下图像的URL。仅当<source>是<picture>元素的子元素时使用。 | |
| type | 视频/ ogg视频/ mp4视频/ webm音频/ ogg音频/ mpeg | 它确定资源的媒体类型。 |
全局属性：
<source>标记支持HTML中的Global属性。
事件属性：
<source>标记支持HTML中的Event属性。
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <source> | Yes | Yes | Yes | Yes | Yes |
