Отзывчивое HTML5 видео

Когда вы хотите использовать видео на вашем сайте, то обычно вы имеете дело с HTML5 видео с Flash резервом. Давайте сделаем наше видео отзывчивым, как и наш сайт.

Существует несколько способов сделать это, ни один из которых не является идеальным. Идут огромные дебаты об адаптивности изображений и иметь что-то схожее для видео и аудиофайлов было бы идеально. Так как нет такого на данный момент решения, нам нужно искать альтернативные.

Медиа запросы

Если вы читали об отзывчивом веб-дизайне, то вы наверняка слышали о медиа запросах и вероятно вы уже их используете. Те, кто этого ещё не делал позволяет нам определить определённые CSS правила для различных устройств вывода без изменения реального содержимого (для подробной информации смотрите CSS медиа запросы.)

Но не много людей знает, что можно применять медиа запросы к элементу source, что обеспечит различные исходные файлы для вашего встраиваемого HTML5 видео и аудио. Вы можете сделать это используя media аттрибуты.

Добавляя соответствующие валидные медиа запросы к источнику видео (например) мы можем указать, что этот отдельный источник должен использоваться при соответствии медиа запросу. Например:

<video controls> 
   <source src="parrots-small.mp4" type="video/mp4" media="all and (max-width:480px)"> 
   <source src="parrots-small.webm" type="video/webm" media="all and (max-width:480px)"> 
   <source src="parrots.mp4" type="video/mp4"> 
   <source src="parrots.webm" type="video/webm"> 
</video>

В этом примере, файл parrots-small.mp4/webm будет загружен для устройств имеющих max-width значение 480 пикселов, иначе будет загружен файл parrots.mp4/webm.

Поддержка браузеров

Быстрое тестирование браузеров показывает, что Chrome, Safari, Internet Explorer 9 и Opera в данный момент поддерживают аттрибут media. Они также загружают только соответствующий файл (например parrots-small.mp4 или parrots.mp4, но не два одновременно). Firefox не поддерживает media аттрибут (Firefox 15 который был выпущен не поддерживает media аттрибут).

(Смотрите пример медиа запроса.)

Это всё звучит отлично, но обсуждения аттрибута media были убраны из спецификации.

Что ещё мы можем попробовать?

CSS

Также мы могли бы просто использовать CSS для определения резиновых размеров для нашего видеофайла.

Основной проблемой в этом является то, что мы обслуживаем один и тот же видеофайл, вне зависимости от используемого устройства. Естественно это может быть проблемой исходя из размера видеофайла, так как мы не хотим, чтобы наши пользователи загружали здоровенный видеофайл, только если они этого специально не хотят.

<video controls preload="none"> 
   <source src="parrots.mp4" type="video/mp4"> 
   <source src="parrots.webm" type="video/webm"> 
</video>

Для этого видео, мы информируем браузер не загружать любое из видео и мы также добавляем информационное сообщение пользователю, о том, насколько велико видео, чтобы они сделали этот выбор самостоятельно.
Заметка: Так как предоставляемый файл будет предоставляться в разных расширениях (MP4 или WebM) в зависимости от поддержки браузера, то сообщение также должно отличаться. Для простоты я указал размер только большого видео.

<video controls preload="none" poster="parrots-poster.jpg"> 
   <source src="parrots.mp4" type="video/mp4"> 
   <source src="parrots.webm" type="video/webm"> 
</video> 
<div class="warning">Заметка: Это видео больше 1078KB. Проигрывание его возможно только при полной загрузке.</div>

Поскольку мы сообщили браузеру не загружать предварительно любое из видео и добавили вместо этого изображение-постер. Изображение само по себе может быть больше, чем объём данных, может загрузить браузер если функция preload была установлена в значение загружать только metadata, поэтому это стоит проверить.

Чтобы удостоверится, что видео точно попадает под размеры устройства, добавим следующий медиа запрос к CSS страницы:

video {  
   width:100%; 
   max-width:500px; 
   height:auto; 
}

С width значением ширины в 100% видео заполнит всё пространство браузера и таким образом мы можем ограничить насколько большим оно может быть установив max-width.

(Смотрите CSS пример и используйте The Responsinator.)

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

Заключение

Медиа аттрибут - это идеальное решение, если ваши видеофайлы могут быть очень большими. Факт, что браузер загружает только одно - также идеален. В то же время он может исчезнуть из спецификации HTML5, то использование его значит, что вам возможно предстоит пересмотреть его использование в будущем.

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

Не существует идеального решения, но я подозреваю, что когда будет найдено решение для отзывчивых изображений, то оно будет адаптировано к HTML5 видео и аудио.

Responsive HTML5 video

Рекомендуемое чтение: Размещение видеороликов на сайте