HTML 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Verzeichnis suchen
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben

Figuren

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

内容类别

没有。

允许的内容

没有，这是一个空的元素。

标记遗漏

它必须有开始标记，但不能有结束标记。

允许父母

媒体元素<audio>或<video>  - 必须放在任何流内容或<track>元素之前。一个<picture>元素，它必须放在<img>元素之前。

允许ARIA角色

没有

DOM界面

HTMLSourceElement

属性

这个元素包含全局属性。

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

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

  1. 一个图像的URL，

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

  1. 一个像素密度描述符，这是一个正的浮动数字之后'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>

规范

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

?

?

?

Vorheriger Artikel： Nächster Artikel：