<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 Explorer	Chrome	Opera	Safari	Firefox
9	8	10.50	4	15

Android	Firefox Mobile	Opera Mobile	Safari Mobile
2	15	11	4

✖

Браузеры

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

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

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