HTML <source>标签，定义媒介资源

<source>标签

source元素可以为HTML文档中的audio元素、video元素等媒介元素定义媒介资源，一般用于规定可替换的video和audio文件格式、资源供浏览器根据自身对媒体类型的支持而进行选择渲染哪一个媒介资源。如果source元素提供的媒介资源，浏览器都支持的话，将选择性地选择第一个的资源来呈现。

提示：source元素一般包含于video或audio元素之内，不包含闭合标签。

source元素实例代码，及在线编辑器

<audio controls>
  <source src='../../static/img/test.html'>
  <source src='../../static/img/test.m4a'>
  <source src='../../static/img/test.mp3'>
</audio>

<audio controls>
  <source src='../../static/img/test.mp3'>
  <source src='../../static/img/test.m4a'>
</audio>

实例代码解析

如上代码，在第一个audio元素之内，定义了三个source媒介资源，其中第一个.html格式的是乱写的音频格式，显然浏览器并不支持。那么，在这个audio元素中，audio引用的是哪个媒介资源呢？为了分清楚这一点，在第二个audio元素中，只写了.mp3格式和.m4a格式两种，其中.mp3的格式虽然浏览器支持，但该文件实际上并不存在，所以浏览器渲染之后，音频控件中的时间长度为0，也就是说，在多个浏览器自持的媒介资源当中，浏览器会引用第一个受支持的媒介资源。

<source>标签属性

属性	描述
src	值为url，指定媒体文件的访问地址
type	值为numeric value，指定媒体资源的MIME类型
media	值为media query，指定媒体资源类型
sizes	设置图像大小
srcset	值为url，应用于picture标签时指定不同情况下的图像url

hot：热门