Вы здесь

Атрибут media HTML тега source

Атрибут media определяет для какого медиа-устройства вывода оптимизирован медиа-файл.

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

Атрибут media может принимать несколько значений.

Синтаксис
<source media="значение">
Значения атрибута

Операторы

Значение Описание
and Определяет оператор И
not Определяет оператор НЕ
, Определяет оператор ИЛИ

Устройства

Значение Описание
all Значение по умолчанию. Все устройства вывода.
aural Речевые синтезаторы
braille Устройства вывода на основе шрифта Брайля
handheld Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода)
projection Проекторы
print Печатающие устройства (например, принтеры)
screen Компьютерные мониторы
tty Телетайпы, терминалы и другие устройства с ограниченными возможностями экрана (для них нельзя использовать пикселы в качестве единиц измерения)
tv Телевизоры (для них характерно низкое разрешение и ограниченные возможности прокрутки)

Значения

Значение Описание
width Определяет ширину целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-width:500px)"
height Определяет высоту целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (max-height:700px)"
device-width Определяет всю доступную ширину экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-width:500px)"
device-height Определяет всю доступную высоту экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-height:700px)"
orientation Определяет ориентацию целевого дисплея/бумаги. Возможные значения - "portrait" или "landscape". Например, media="screen and (orientation: landscape)"
aspect-ratio Определяет соотношение ширины и высоты (width/height) целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (aspect-ratio:16/9)"
device-aspect-ratio Определяет соотношение device-width/device-height экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (devic-aspect-ratio:16/9)"
color Определяет число бит на цветовой канал дисплея. Можно использовать префиксы "min-" и "max-". Например, media="screen and (color:3)"
color-index Определяет количество цветов, поддерживаемых устройством. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-color-index:256)"
monochrome Определяет число бит на пиксель в монохромном фреймовом буфере. Можно использовать префиксы "min-" и "max-". Например, media="screen and (monochrome:2)"
resolution Определяет разрешение устройства (dpi или dpcm). Можно использовать префиксы "min-" и "max-". Например, media="screen and (resolution:300dp)"
scan Определяет тип развертки телевизионного экрана. Возможные значения - "progressive" или "interlace". Например, media="screen and (scan: interlace)"
grid Определяет, является ли устройство с фиксированным размером символов или нет. Возможные значения: "1" — устройство с фиксированным размером символов, "0" — нет. Например, media="handheld and (grid:1)"
Пример использования атрибута


<source src="http://msiter.ru/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">