source
该HTML <source> 元素为<picture>,<audio>或<video>元素指定多个媒体资源。这是一个空的元素。它通常用于提供不同浏览器支持的多种格式的相同媒体内容。
内容类别 | 没有。 |
---|---|
允许的内容 | 没有,这是一个空的元素。 |
标记遗漏 | 它必须有开始标记,但不能有结束标记。 |
允许父母 | 媒体元素<audio>或<video> - 必须放在任何流内容或<track>元素之前。一个<picture>元素,它必须放在<img>元素之前。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLSourceElement |
属性
这个元素包含全局属性。
sizes
是源大小的列表,它描述了源代表的图像的最终渲染宽度。每个源大小由逗号分隔的媒体条件长度对列表组成。这个信息被浏览器用来确定,在放下页面之前,定义哪个图像以srcset
供使用。
sizes属性
只有当<source>
元素是元素的直接子元素时,该属性才有效果<picture>
。媒体资源的src
必填项<audio>
和<video>
地址。<source>
元素放置在<picture>
元素中时,该属性的值将被忽略。srcset
以逗号分隔的一个或多个字符串的列表,表示由浏览器使用的源代表的一组可能的图像。每个字符串由以下组成:
- 一个图像的URL,
- 一个宽度描述符,这个正整数直接跟在后面
'w'
。缺省值是缺省值,即无穷大。
- 一个像素密度描述符,这是一个正的浮动数字之后
'x'
。缺省值是缺省值1x
。
列表中的每个字符串必须至少有一个宽度描述符或像素密度描述符才是有效的。在列表中,只能有一个包含宽度描述符和像素密度描述符的元组的字符串。
浏览器选择最适合的图像在给定的时间点显示。
srcset
只有当<source>
元素是元素的直接子元素时,该属性才有效果<picture>
。
如果未指定type属性,则从服务器检索媒体类型并检查Gecko是否可以处理; 如果无法呈现,则检查下一个源。如果指定了type属性,则将其与Gecko可以播放的类型进行比较,如果没有被识别,服务器甚至不会被查询; 而是一次检查下一个源元素。
例子
<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中使用音频和视频。
规范
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<source>' in that specification. | Living Standard | |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | 3.51 | 9 | (Yes) | (Yes) |
media | (Yes) | (Yes) | 15 | 9 | (Yes) | (Yes) |
sizes | (Yes) | (Yes) | 38 332 | ? | ? | ? |
src | (Yes) | (Yes) | 3.5 | 9 | (Yes) | (Yes) |
srcset | (Yes) | (Yes) | 38 332 | ? | ? | ? |
type | (Yes) | (Yes) | 3.5 | 9 | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 11 | ? | ? | ? |
media | (Yes) | (Yes) | (Yes) | 15 | ? | ? | ? |
sizes | (Yes) | (Yes) | (Yes) | 38 332 | ? | ? | ? |
src | (Yes) | (Yes) | (Yes) | 1 | ? | ? | ? |
srcset | (Yes) | (Yes) | (Yes) | 38 332 | ? | ? | ? |
type | (Yes) | (Yes) | (Yes) | 1 | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com