HTML参考手册
标签 | Elements
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
资源的MIME类型,可选地带有一个codecs
参数。有关如何指定编解码器的信息,请参阅RFC 4281。媒体查询资源的预期媒体; 这应该只用于一个元素。media
<picture>
如果未指定type属性,则从服务器检索媒体类型并检查Gecko是否可以处理; 如果无法呈现,则检查下一个源。如果指定了type属性,则将其与Gecko可以播放的类型进行比较,如果没有被识别,服务器甚至不会被查询; 而是一次检查下一个源元素。
例子
本示例演示如何为浏览器支持Ogg格式的用户提供Ogg格式的视频,以及支持浏览器的用户使用QuickTime格式的视频。如果浏览器不支持audio
or 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中使用音频和视频。
规范
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 |
? |
? |
? |
标签 | Elements相关
超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。