HTML тег <source>

Элемент <source> (от англ. "source" ‒ «источник») используется для указания расположения медийных ресурсов (файлов) для медиа-элементов, таких как <video> и <audio>. Также применяется для добавления изображений в контейнере <picture>.
В элементы <audio> и <video> для достижения кроссбраузерности обычно вкладывается сразу несколько элементов <source> с различными альтернативными форматами одного и того же файла (например, mp3, wav, ogg и т.д.).

Примечание: Когда располагается внутри <audio> или <video>, элемент <source> должен идти после медийных файлов, но до <track>. Внутри <picture> он должен идти перед <img>.

Синтаксис

<[audio | video]>
  ...
  <source src="...">
  ...
</[audio | video]>
или
<picture>
  ...
  <source srcset="...">
  ...
  <img src="..." alt="...">
</picture>

Закрывающий тег

Не обязателен.

Атрибуты

mediaHTML5
Указывает под какие типы устройств оптимизирован файл. Браузеры могут использовать этот атрибут для определения, возможно ли воспроизведение файла или нет.

sizesHTML5
Задаёт размеры изображений для разных макетов страницы.

srcHTML5
Указывает URL-адрес медиа файла, который будет воспроизводится.

srcsetHTML5
Изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).

type
MIME-тип медийного источника.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Тег <source> был добавлен в HTML5.

Пример использования:

Аудиоплеер с двумя звуковыми файлами. Браузер выберет, какой из них он может (если может) воспроизвести:

Пример HTML:

Попробуй сам
<audio controls>
   <source src="audio/BigHornsIntro.ogg" type="audio/ogg">
   <source src="audio/BigHornsIntro.mp3" type="audio/mpeg">
   Ваш браузер не поддерживает тег audio.
</audio>

Элемент <picture> с двумя исходными файлами и резервным изображением:

Пример HTML:

Попробуй сам
<picture>
  <source media="(max-width: 25em)"
          srcset="iphone.png">

  <source media="(max-width: 48em)"
          srcset="iphone@tablet.png">

  <img src="iphone.png"
      alt="iPhone">

</picture>

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

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

Поддержка браузерами


Учебник HTML

HTML Элементы



Contema