HTML source 标签
HTML <source> 概述
HTML <source> 元素为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源， picture 参考 这里 。
这是一个空元素。它通常用于以不同浏览器支持的多种格式提供相同的媒体内容。
HTML <source> 标签功能
<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。
<source> 标签允许您规定多个视频 / 音频文件供浏览器选择（根据它对媒体类型或者编解码器的支持进行选择）。
HTML <source> 标签用法
带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
又一个的例子
<video controls>
<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
I'm sorry; your browser doesn't support HTML5 video.
</video>
本示例演示如何为浏览器支持 Ogg 格式的用户提供 Ogg 格式的视频，以及为浏览器支持 Ogg 格式的用户提供 QuickTime 格式的视频。
如果浏览器不支持 audioor video 元素，则会显示一条通知。如果浏览器支持该元素但不支持任何指定的格式，error 则会引发一个事件，并且默认媒体控件（如果启用）将指示错误。
浏览器支持
IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 标签。
**注释：**IE 8 或更早版本的 IE 浏览器都不支持 标签。
引入html5media.js, 可以使<source>兼容低版本 IE
HTML4 与 HTML5 之间的差异
<source> 标签是 HTML5 中的新标签。
属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
mediaNew |
media_query | 规定媒体资源的类型，供浏览器决定是否下载。 |
srcNew |
URL | 规定媒体文件的 URL。 |
typeNew |
MIME_type | 规定媒体资源的 MIME 类型。 |
| sizes | ———– | 描述了源表示的图像的最终渲染宽度 |
| srcset | ———– | 指示由浏览器使用的源表示的一组可能的图像 |
sizes
是源尺寸的列表，描述了源表示的图像的最终渲染宽度。每个源大小均包含一个以逗号分隔的媒体条件长度对列表。浏览器使用此信息来确定在布局页面之前 srcset 使用哪个定义的图像。仅当元素是元素的直接子元素时，
该 sizes 属性才有效。<source><picture>
src
媒体资源的<audio>和必需<video>。将<source>元素放置在<picture>元素内部时，将忽略此属性的值。
srcset
由逗号分隔的一个或多个字符串的列表，指示由浏览器使用的源表示的一组可能的图像。每个字符串由以下组成：
- 图片的一个网址，
- 宽度描述符，即正整数，后跟’w’。如果缺失，则默认值为无穷大。
- 像素密度描述符，即正浮点数，后跟’x’。如果缺少默认值，则为 1x。 列表中的每个字符串必须至少具有一个宽度描述符或一个像素密度描述符才有效。在列表中，必须只有一个字符串，其中包含相同的宽度描述符和像素密度描述符元组。
浏览器选择最适当的图像以在给定的时间点显示。仅当元素是元素的直接子元素时，
该 srcset 属性才有效。<source><picture>
type
资源的 MIME 类型，可以选择包含 codecs 参数。有关如何指定编解码器的信息，请参见 RFC 4281。
media
资源预期媒体的媒体查询；仅应在<picture>元素中使用。
如果未指定 type 属性，则从服务器检索媒体的类型，并检查 Gecko 是否可以处理它；如果无法渲染，则检查下一个来源。如果指定了 type 属性，则会将其与 Gecko 可以播放的类型进行比较，如果无法识别，则甚至不会查询服务器。而是一次检查下一个源元素。
全局属性
<source> 标签支持 HTML 全局属性。
事件属性
<source> 标签支持 HTML 事件属性
