<source> / Атрибут media

Описание

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

Синтаксис

<audio>
 <source src="URL" media="all|braille|handheld|print|screen|speech|projection|tty|tv">
</audio>
<video>
 <source src="URL" media="all|braille|handheld|print|screen|speech|projection|tty|tv">
</video>

Значения

all
Все устройства.
braille
Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld
Наладонники, смартфоны, устройства с малой шириной экрана.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection
Проектор.
tty
Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана.
tv
Телевизор.

Значение по умолчанию

all

Пример. Использование атрибута media
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>media</title>
 </head>
 <body>
  <picture>
    <source srcset="images/mushroom_landscape.jpg" media="screen and (orientation: landscape)">
    <source srcset="images/mushroom_portrait.jpg" media="screen and (orientation: portrait)">
    <img src="images/mushroom.jpg" alt="">
  </picture>
 </body>
</html>

В данном примере применяется два изображения — одно отображается при альбомной ориентации экрана, второе при портретной ориентации. Чтобы заметить эффект на настольном компьютере, достаточно изменить размеры окна браузера, задав ему разные пропорции.

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
9810.50415
AndroidFirefox MobileOpera MobileSafari Mobile
215114
✖

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Справочник HTML