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
120
|
---
title: Элемент <source>
slug: Web/HTML/Element/source
translation_of: Web/HTML/Element/source
---
<p><strong>HTML-элемент <code><source></code> </strong> указывает несколько медиа-ресурсов для элементов {{HTMLElement("picture")}}, {{HTMLElement("video")}} и {{HTMLElement("audio")}}. Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">в нескольких форматах, поддерживаемых различными браузерами</a>.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
<td>Нет</td>
</tr>
<tr>
<th scope="row">Разрешённый контент</th>
<td>Нет, это {{Glossary("пустой элемент")}}.</td>
</tr>
<tr>
<th scope="row">Пропуск тегов</th>
<td>Должен иметь открывающий тег; закрывающий тег необязателен.</td>
</tr>
<tr>
<th scope="row"><dfn>Разрешённые родители</dfn></th>
<td>
<div>Медиа-элементы —{{HTMLElement("audio")}} или {{HTMLelement("video")}}—должен быть помещён перед любым <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковым контентом</a> или элементом{{HTMLElement("track")}}.</div>
<div>Элемент {{HTMLElement("picture")}} , должен быть помещён перед элементом {{HTMLElement("img")}}.</div>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Нет</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLSourceElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Этот элемент включает в себя <a href="/en-US/docs/HTML/Global_attributes">универсальные атрибуты</a>.</p>
<ol>
<li>адреса изображения (URL);</li>
<li>дескриптора ширины, представляющего собой целое положительное число, за которым следует <code>'w'</code>. Значением по умолчанию, если оно отсутствует, является бесконечность.</li>
<li>дескриптора плотности пикселей, представляющее собой положительное десятичное число, за которым следует <code>'x'</code>. Значением по умолчанию, если оно отсутствует, является <code>1x</code>.</li>
</ol>
<dl>
<dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
<dd>Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиа-запросов со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте {{htmlattrxref("srcset", "source")}}. Атрибут <code>sizes</code> работает только тогда, когда элемент {{HTMLElement("source")}} расположен внутри элемента {{HTMLElement("picture")}}.</dd>
<dt>{{htmlattrdef("src")}}</dt>
<dd>Требуемый для элементов {{HTMLElement("audio")}} и {{HTMLElement("video")}} адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент <code><source></code> размещён внутри элемента {{HTMLElement("picture")}}.</dd>
<dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
<dd>Список из одной или нескольких строк, разделённых запятыми, определяющий набор возможных изображений, представленных для отображения в браузере. Каждая строка может состоять из:</dd>
<dd>
<p>Каждая строка списка должна содержать по крайней мере дескриптор ширины или дескриптор плотности пикселей. </p>
<p>Браузер выбирает самое подходящее изображение для отображения в данный момент времени.</p>
<p>Атрибут <code>srcset</code> работает только в том случае, когда элемент {{HTMLElement("source")}} находится внутри элемента {{HTMLElement("picture")}}.</p>
</dd>
<dt>{{htmlattrdef("type")}}</dt>
<dd>MIME-тип ресурса, опционально содержащий параметр <code>codecs</code>. Для получения полной информации по указанию кодеков смотрите <a class="external" href="https://tools.ietf.org/html/rfc4281">RFC 4281</a>. </dd>
<dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
<dd>Определяет <a class="internal" href="/en-US/docs/CSS/Media_queries">медиа-запрос</a> , согласно которому будет выводиться изображение. Работает только в элементе {{HTMLElement("picture")}}.</dd>
</dl>
<p>Если атрибут <code>type</code> не указан, то он запрашивается с сервера и проверяется, может ли {{Glossary("user agent")}} его обрабатывать. Если он не может быть обработан, проверяется следующий <code><source></code>. Если атрибут <code>type</code> указан, он сравнивается с типами, которые может поддерживать {{Glossary("user agent")}}, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент <code><source></code>.</p>
<h2 id="Примеры">Примеры</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="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '<source>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat("html.elements.source")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Элемент {{HTMLElement("picture")}} </li>
<li>Элемент {{HTMLElement("audio")}} </li>
<li>Элемент {{HTMLElement("video")}} </li>
</ul>
<p>{{HTMLRef}}</p>
|
