Работа с видео в HTML5 на примере сайта MBfilms

19 апреля

Работа с видео в HTML5 | Дизайн-студия «Медиасеть»

При создании сайта для студии MBFilms была разработана концепция , в основе которой лежала идея полноэкранного видео, служившее фоном страниц. Реализация идеи заключалась в использовании контейнера ‹video›, так как сайт должен без потерь работать на всех устройствах, включая продукцию Apple, которая, как известно, на дух не переносит flash. Поэтому взоры наши устремились в сторону чистого и прекрасного HTML5. После нескольких часов поиска и анализа идей, мы выделили основные проблемы и наметили возможные пути их решения.

Первая проблема, с которой мы столкнулись — это злополучная патентная война. Дело в том, что:
«Рабочая группа HTML 5 считает, что желательно определить по крайней мере один видео-формат, который бы поддерживался всеми браузерами. Идеальный формат в этом отношении должен: иметь хорошее сжатие, хорошее разрешение изображения и низкие затраты работы процессора для расшифровки быть бесплатным. В дополнение к программным декодерам, для формата должен существовать декодер для видео с аппаратных средств, так как у многих встроенных процессоров нет возможности расшифровать видео в нужный нам формат.»
Это утверждает википедия, но это было бы слишком хорошо, чтобы быть правдой.

Изначально, Ogg Theora был рекомендуемым стандартом для HTML 5, потому что он не был затронут никакими известными патентами. На деле все завернулось намного интереснее. Параноики из Apple (к слову владельцы некоторых патентов на H.264) и Nokia решили что использовать незапатентованный формат Theora чревато последствиями и отказались от него. Особенно порадовал один из доводов Apple — «HTML ни разу за всю историю его существования не требовал особые форматы для чего-либо». Google тоже не остались в стороне от всего этого и в итоге мы имеем на данный момент целых 3 формата: Ogg Theora, H.264, VP8 (WebM).

 
Поддерживает
 
Не поддерживаеет
 
Требуются дополнительные кодеки
Браузер Форматы, поддерживаемые различными веб-браузерами
Ogg H.264 VP8(WebM) Другие
Internet Explorer Нет 9.0 При определенных условиях Нет
Mozilla Firefox 19.0 21.0 19.0 Нет
Google Chrome 24.0 24.0 24.0 Нет
Safari Нет 5.1 Нет При определенных условиях
Opera 12.1 Нет 12.1 Нет
Итого, чтобы разместить видео на сайте и быть уверенным в том, что оно будет воспроизводится на всех устройствах, приходится кодировать его в 3 формата. В процессе работы, кстати выяснилось, что на самом деле достаточно всего лишь двух форматов: mp4 и webm. Они позволяют воспроизводить видео на всех устройствах и во всех популярных браузерах.

Следующим шагом был выбор плеера

Опять н-ое количество часов поиска, тестов и анализа. Выбор пал на flowplayer. Полная документация, широкие возможности кастомизации и простота в общении привлекли нас в этом плагине. Мы использовали API.flowplayer для создания собственных обработчиков событий, стандартные опции плеера для создания удовлетворяющей нас визуальной составляющей. В итоге у нас получился плеер, который гармонично влился в концепт и стиль сайта, у которого есть заставка, начальный и конечный экраны и который работает. При чем везде. Красота, что еще сказать)

Одним из основных пунктов ТЗ была поддержка мобильных устройств, что в купе с основной идей концепции (видео должно быть фоном страницы) породило наверно главную головную боль разработчиков данного проекта. Как сделать так, чтобы видео оптимально отображалось на устройствах с диагональю экрана от 4х дюймов до 29ти? Мы перебрали множество вариантов соотношения сторон и выбрали оптимальный = 0.417. Но это породило еще одну проблему, которая пришла с той стороны, на которой априори все должно быть солнечно и беззаботно. Дело в том, что на IPhone если контейнер видео перекрывает какой либо другой элемент страницы — то он блокирует его полностью за счет своего встроенного проигрывателя. А при нашем полноэкранном просмотре — это полный паралич навигации и остальных приятных ништяков сайта. Эта проблема известна Apple, но по всей видимости она для них не столь существенна, потому как решения ее они не предоставили общественности. Нас спасла маленькая незаметная кнопка «Назад», которая к нашей бесконечной радости есть на всех браузерах. Другим способом мы так и не смогли решить эту задачу.

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

Подписывайтесь на наши страницы в Фейсбуке и ВКонтакте
Cмотреть все посты