---
title: Элемент <source>
slug: Web/HTML/Element/source
translation_of: Web/HTML/Element/source
---
<p><strong>HTML-элемент <code>&lt;source&gt;</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>&lt;source&gt;</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>&lt;source&gt;</code>. Если атрибут <code>type</code> указан, он сравнивается с типами, которые может поддерживать {{Glossary("user agent")}}​​​​​, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент <code>&lt;source&gt;</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">&lt;video controls&gt;
  &lt;source src="foo.webm" type="video/webm"&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mov" type="video/quicktime"&gt;
  I'm sorry; your browser doesn't support HTML5 video.
&lt;/video&gt;
</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', '&lt;source&gt;')}}</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>