Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

HTML-элемент <source>  указывает несколько медиа-ресурсов для элементов <picture>, <video> и <audio>. Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента в нескольких форматах, поддерживаемых различными браузерами.

Категории контента Нет
Разрешённый контент Нет, это  пустой элемент.
Пропуск тегов Должен иметь открывающий тег; закрывающий тег необязателен.
Разрешённые родители
Медиа-элементы —<audio> или <video>—должен быть помещён перед любым потоковым контентом или элементом<track>.
Элемент <picture> , должен быть помещён перед элементом <img>.
Permitted ARIA roles Нет
DOM interface HTMLSourceElement

Атрибуты

Этот элемент включает в себя универсальные атрибуты.

  1. адреса изображения (URL);
  2. дескриптора ширины, представляющего собой целое положительное число, за которым следует 'w'.  Значением по умолчанию, если оно отсутсвует, является бесконечность.
  3. дескриптора плотности пикселей, представляющее собой положительное десятичное число, за которым следует 'x'. Значением по умолчнию, если оно остутствует, является 1x.
sizes
Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиа-запросов со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте srcset. Атрибут sizes работает только тогда, когда элемент  <source> расположен внутри элемента <picture>.
src
Требуемый для элементов  <audio> и <video> адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент <source> размещён внутри элемента <picture>.
srcset
Список из одной или нескольких строк, разделённых запятыми, определяющий набор возможных изображений, представленных для отображения в браузере. Каждая строка может состоять из:

Каждая строка списка должна содержать по крайней мере дескриптор ширины или дескриптор плотности пикселей.  

Браузер выбирает самое подходящее изображение для отображения в данный момент времени.

Атрибут srcset  работает только в том случае, когда элемент <source> находится внутри элемента <picture>.

type
MIME-тип ресурса, опцинально содержащий параметр codecs. Для получения полной информации по указанию кодеков смотрите  RFC 4281
media
Определяет медиа-запрос , согласно которому будет выводиться изображение. Работает только в элементе <picture>.

Если атрибут type не указан, то он запрашивается с сервера и проверяется, может ли user agent его обрабатывать. Если он не может быть обработан, проверяется следующий <source>. Если атрибут type указан, он сравнивается с типами, которые может поддерживать user agent​​​​​, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент <source>.

Примеры

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 audio or video 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 error event is raised and the default media controls (if enabled) will indicate an error. See also the list of media formats supported by the audio and video elements in various browsers.

<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>

For more examples, see Using audio and video in Firefox.

Спецификации

Спецификация Статус Комментарии
HTML Living Standard
Определение '<source>' в этой спецификации.
Живой стандарт  

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5
Замечания
Полная поддержка 3.5
Замечания
Замечания Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Opera Android ? Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
media
Экспериментальная
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 15IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 15Opera Android ? Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
sizes
Экспериментальная
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 38
Полная поддержка 38
Полная поддержка 33
Отключено
Отключено From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari Полная поддержка 9
Полная поддержка 9
Частичная поддержка 7
WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 38
Полная поддержка 38
Полная поддержка 33
Отключено
Отключено From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Полная поддержка 9.2
Полная поддержка 9.2
Частичная поддержка 8
Samsung Internet Android Полная поддержка Да
srcChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
srcset
Экспериментальная
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 38
Полная поддержка 38
Полная поддержка 33
Отключено
Отключено From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari Полная поддержка 9
Полная поддержка 9
Частичная поддержка 7
WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 38
Полная поддержка 38
Полная поддержка 33
Отключено
Отключено From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Полная поддержка 9.2
Полная поддержка 9.2
Частичная поддержка 8
Samsung Internet Android Полная поддержка Да
typeChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: fidelman, Nina_Amatova
Обновлялась последний раз: fidelman,