<source>

Вставляет звуковой или видеофайл для элементов <audio> и <video>. Обобщенно такие файлы называются медийными. Также применяется для добавления изображений в контейнере <picture>

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

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

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

Поддержка:

HTML4 и выше

Атрибуты:

media - Определяет устройство, для которого будет воспроизводиться файл.

<picture>
    <source srcset="web.jpg" media="screen and (orientation: landscape)">
    <source srcset="web.jpg" media="screen and (orientation: portrait)">
    <img src="web.jpg">
</picture>

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

src - Адрес медиа-файла.

<picture >
    <img src="web.jpg" >
</picture>

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

<picture>
   <source srcset="web.jpg">
   <img src="web.jpg">
</picture>

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

<video width="400" height="300" controls="controls">
   <source src="movie.mp4" type='video/mp4'>
</video>

Пример:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>media</title> 
 </head> 
 <body> 
  <picture>
    <source srcset="web.jpg" media="screen and (orientation: landscape)">
    <source srcset="web.jpg" media="screen and (orientation: portrait)">
    <img src="web.jpg">
  </picture>
 </body> 
</html>