source

<source>

该HTML <source> 元素为<picture>，<audio>或<video>元素指定多个媒体资源。这是一个空的元素。它通常用于提供不同浏览器支持的多种格式的相同媒体内容。

属性

这个元素包含全局属性。

sizes是源大小的列表，它描述了源代表的图像的最终渲染宽度。每个源大小由逗号分隔的媒体条件长度对列表组成。这个信息被浏览器用来确定，在放下页面之前，定义哪个图像以srcset供使用。

sizes属性只有当<source>元素是元素的直接子元素时，该属性才有效果<picture>。媒体资源的src必填项<audio>和<video>地址。<source>元素放置在<picture>元素中时，该属性的值将被忽略。srcset以逗号分隔的一个或多个字符串的列表，表示由浏览器使用的源代表的一组可能的图像。每个字符串由以下组成：

• 一个图像的URL，

• 一个宽度描述符，这个正整数直接跟在后面'w'。缺省值是缺省值，即无穷大。

• 一个像素密度描述符，这是一个正的浮动数字之后'x'。缺省值是缺省值1x。

列表中的每个字符串必须至少有一个宽度描述符或像素密度描述符才是有效的。在列表中，只能有一个包含宽度描述符和像素密度描述符的元组的字符串。

浏览器选择最适合的图像在给定的时间点显示。

srcset只有当<source>元素是元素的直接子元素时，该属性才有效果<picture>。

type资源的MIME类型，可选地带有一个codecs参数。有关如何指定编解码器的信息，请参阅RFC 4281。媒体查询资源的预期媒体; 这应该只用于一个元素。media<picture>

如果未指定type属性，则从服务器检索媒体类型并检查Gecko是否可以处理; 如果无法呈现，则检查下一个源。如果指定了type属性，则将其与Gecko可以播放的类型进行比较，如果没有被识别，服务器甚至不会被查询; 而是一次检查下一个源元素。

例子

本示例演示如何为浏览器支持Ogg格式的用户提供Ogg格式的视频，以及支持浏览器的用户使用QuickTime格式的视频。如果浏览器不支持audioor video元素，则会显示通知。如果浏览器支持该元素，但不支持任何指定格式，error则会引发事件，并且默认媒体控件（如果启用）将指示错误。另请参阅各种浏览器中音频和视频元素支持的媒体格式列表。

<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>

有关更多示例，请参阅在Firefox中使用音频和视频。

规范

浏览器兼容性