1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
---
title: Source
slug: Web/HTML/Element/source
translation_of: Web/HTML/Element/source
---
<h2 id="概述">概述</h2>
<p><strong>HTML <code><source></code> </strong>元素为 {{HTMLElement("picture")}}, {{HTMLElement("audio")}} 或者 {{HTMLElement("video")}} 元素指定多个媒体资源。这是一个空元素。它通常用于以<a href="/zh-CN/docs/Web/HTML/Supported_media_formats">不同浏览器支持的多种格式</a>提供相同的媒体内容。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">
<p>Usage Context</p>
</th>
<td>A media element ({{HTMLElement("audio")}} or {{HTMLelement("video")}}, and it should be placed before any <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> or {{HTMLElement("track")}} element.</td>
</tr>
<tr>
<th scope="row"><dfn>Permitted parent elements</dfn></th>
<td>A {{HTMLElement("picture")}} element, and it should be placed before the {{HTMLElement("img")}} element.</td>
</tr>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
<td>None.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>None, it is an {{Glossary("empty element")}}.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>It must have start tag, but must not have an end tag.</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLSourceElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p>该元素包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>.</p>
<dl>
<dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
<dd>Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in {{htmlattrxref("srcset", "source")}} to use.<br>
The <code>sizes</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</dd>
<dt>{{htmlattrdef("src")}}</dt>
<dd>Required for {{HTMLElement("audio")}} and {{HTMLElement("video")}}, address of the media resource. The value of this attribute is ignored when the <code><source></code> element is placed inside a {{HTMLElement("picture")}} element.</dd>
<dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
<dd>A list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. Each string is composed of:
<ol>
<li>one URL to an image,</li>
<li>a width descriptor, that is a positive integer directly followed by <code>'w'</code>. The default value, if missing, is the infinity.</li>
<li>a pixel density descriptor, that is a positive floating number directly followed by <code>'x'</code>. The default value, if missing, is <code>1x</code>.</li>
</ol>
<p>Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.<br>
The browser chooses the most adequate image to display at a given point of time.<br>
The <code>srcset</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</p>
</dd>
<dt>{{htmlattrdef("type")}}</dt>
<dd>The MIME-type of the resource, optionally with a <code>codecs</code> parameter. See <a class="external" href="http://tools.ietf.org/html/rfc4281">RFC 4281</a> for information about how to specify codecs.</dd>
<dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
<dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Media query</a> of the resource's intended media; this should be used only in a {{HTMLElement("picture")}} element.</dd>
</dl>
<p>If the <strong>type</strong> attribute isn't specified, the media's type is retrieved from the server and checked to see if Gecko can handle it; if it can't be rendered, the next <strong>source</strong> is checked. If the <strong>type</strong> attribute is specified, it's compared against the types Gecko can play, and if it's not recognized, the server doesn't even get queried; instead, the next <strong>source</strong> element is checked at once.</p>
<h2 id="Examples">Examples</h2>
<p>This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the<code> audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. See also the list of <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">media formats supported by the audio and video elements</a> in various browsers.</p>
<pre class="brush: html"><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>
</pre>
<p>For more examples, see <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using audio and video in Firefox</a>.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'edits.html#the-source-element-when-used-with-the-picture-element', '<source>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Initial definition of <code><source></code> used inside a {{HTMLElement("picture")}} element.</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-source-element', '<source>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Initial definition of <code><source></code> used inside a media element, {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
{{Compat("html.elements.source")}}
<h2 id="See_also">See also</h2>
<ul>
<li>{{HTMLElement("picture")}} element</li>
</ul>
<p>{{HTMLRef}}</p>
|
