HTML тег <source>

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

Синтаксис

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

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

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

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

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

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

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

Учебник HTML

HTML Элементы