Элемент <source>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Категории контента Нет
Допустимый контент Нет, это пустой элемент.
Пропуск тегов Должен иметь открывающий тег; закрывающий тег необязателен.
Допустимые родители Медиа-элементы —<audio> или <video>—должен быть помещён перед любым потоковым контентом или элементом<track>.Элемент <picture> , должен быть помещён перед элементом <img>.
Допустимые ARIA-роли Нет
DOM-интерфейс 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.

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>

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

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

Specification
HTML
# the-source-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
source
height
media
sizes
src
srcset
type
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Has more compatibility info.

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