Атрибут media определяет для какого медиа-устройства вывода оптимизирован медиа-файл.
Браузер может использовать этот атрибут для определения, может ли он воспроизвести данный файл или нет. Если воспроизвести файл невозможно, то браузер может не загружать его.
Атрибут media может принимать несколько значений.
Синтаксис атрибута
<source media="значение">
Значения атрибута
Операторы
| Значение | Описание |
|---|---|
| and | Определяет оператор И |
| not | Определяет оператор НЕ |
| , | Определяет оператор ИЛИ |
Устройства
| Значение | Описание |
|---|---|
| all | Значение по умолчанию. Все устройства вывода. |
| aural | Речевые синтезаторы |
| braille | Устройства вывода на основе шрифта Брайля |
| handheld | Ручные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода) |
| projection | Проекторы |
| Печатающие устройства (например, принтеры) | |
| 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="//msiter.ru/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
