HTML <source> 元素

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

带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：

<audio controls>
    <source src="/examples/horse.ogg" type="audio/ogg">
    <source src="/examples/horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

尝试一下 »

特性

内容类别 无。
允许的内容 无，它是一个空元素。
标签省略 它必须有开始标签，不能有结束标签。
允许的父元素 媒体元素 - <audio> 或 <video> - 它必须放在任何流式内容或 <track> 元素之前。<picture>元素，它必须放在 <img> 元素之前。
允许的 ARIA 角色 无
DOM 接口 HTMLSourceElement

属性

该元素包含了全局属性。

sizes

实验性

表示源大小的列表，用于描述源代表的图像的最终渲染宽度。每个源大小由逗号分隔的媒体条件长度对列表组成。浏览器使用该信息来确定在渲染页面之前，使用 srcset 中定义的哪个图像。

src

表示媒体资源的地址，在 <audio> 和 <video> 中必须有该属性值。当 <source> 元素放置在 <picture> 元素中时，该属性的值将被忽略。

srcset

实验性

以逗号分隔的一个或多个字符串的列表，表示由浏览器使用的源代表的一组可能的图像。每个字符串由以下组成：

  1. 一个图像的 URL；
  2. 一个宽度描述符，它是一个正整数，后面跟着 w。未填便是无限大；
  3. 一个像素密度描述符，即一个正数浮点数，后面跟着 x。默认值是 1x 。

列表中的每个字符串必须至少有一个宽度描述符或像素密度描述符才是有效的。在列表中，只能有一个包含相同宽度描述符和像素密度描述符元组的字符串。
浏览器会根据情况选择最适合的图像进行显示。
仅当 <source> 元素是 <picture> 元素的直接子元素时， srcset 属性才有效。

type

资源的 MIME 类型，可选地带有 codecs 参数。有关如何指定编解码器的信息，请参见RFC 4281。

media

实验性

媒体查询资源的预期媒体；这应该仅用于 <picture> 元素。

如果未指定 type 属性，则从服务器获取媒体类型并检查用户代理是否可以处理它; 如果无法展示，则检查下一个 <source>。如果指定了 type 属性，则将其与用户代理可以展示的类型进行比较，如果未识别，也不会去查询服务器；相反，会立即检查下一个 <source> 元素。

事件属性

<source> 元素支持 HTML 的事件属性。

更多实例

该实例演示如何为支持 Ogg 格式浏览器的用户提供 Ogg 格式的视频，以及支持 QuickTime 格式浏览器的用户使用 QuickTime 格式的视频。如果浏览器不支持 audio 或 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">
  对不起；您的浏览器不支持 HTML5 视频。
</video>

规范

规范 状态 备注
HTML Living Standard
<source> 的定义		 现行的标准 -

HTML 4.01 与 HTML5 之间的差异

<source> 元素是 HTML5 中的新元素。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 支持 支持 3.51 9 支持 支持
media 支持 支持 15 9 支持 支持
sizes 支持 支持

38

332

 未知 未知 未知
src 支持 支持 3.5 9 支持 支持
srcset 支持 支持

38

332

 未知 未知 未知
type 支持 支持 3.5 9 支持 支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 11 未知 未知 未知
media 支持 支持 支持 15 未知 未知 未知
sizes 支持 支持 支持

38

332

 未知 未知 未知
src 支持 支持 支持 1 未知 未知 未知
srcset 支持 支持 支持

38

332

 未知 未知 未知
type 支持 支持 支持 1 未知 未知 未知

1. 在 Firefox 15 之前，Firefox 会选择第一个具有与支持的媒体格式的 MIME 类型匹配的类型的源元素；有关详细信息，请参阅 bug 449363。

2. 从版本 33 开始：该特性由 dom.image.picture.enabled 首选项控制（需要设置为 true）。要更改 Firefox 中的首选项，请访问 about:config。

相关链接