В последнее время заказчики полюбили использование видео роликов в качестве фона. Ролики на бэке оживляют сайт, а использование полупрозрачных наложений поверх них позволяет быстро создать приличные графические эффекты.
Украшательства я не буду затрагивать, а вот технические моменты, такие как — использование конечных плагинов, настройки, центровка и т.п. я подробно опишу.
Типичные требования следующие. Итак, видео-ролик должен:
- проигрываться без звука,
- закрывать собой весь контейнер, с учетом резиновой (responsive) верстки,
- центрироваться и масштабироваться в контейнере,
- скрывать по возможности все прочие элементы проигрывателя,
- воспроизводится «по-кругу» без остановки,
- воспроизводиться на популярных мобильных платформах, таких как, например, safari под iOS.
Технически так же должна быть возможность остановить ролик, чтобы программно запустить его сначала. Это нужно при показе ролика в качестве одного из слайдов, если он подгружен как фон в галерею.
- реализация для разных источников видео.
Источники видео
Начнем с последнего требования. Я опишу подход реализации задачи по трем наиболее распространенным источникам видео:
- файлы .mp4, (и другие форматы поддерживаемые HTML 5 контейнером video;
- видео-ролики с Youtube, с использованием jQuery плагина jquery.mb.YTPlayer;
- видео-ролики с Vimeo, с использованием jQuery плагина Vimeo Player API.
Выбор указанных плагинов должен позволить нам выполнить все остальные требования по крайней мере с технической точки зрения.
В программе у меня реализованы все три источника вместе, но для описания удобно рассматривать их по отдельности, чтобы избежать путаницы и нагромождений кода.
Фоновое mp4 видео в HTML 5 контейнере (тег video)
Это самый простой случай. Если отбросить нюансы под iOS, где в некоторых случаях на мобилках браузеры отказываются делать автозапуск видео, то все также просто как и с фоновой картинкой.
Подробнее см. в статье адаптивная верстка MP4 видео.
Управлять воспроизведением ролика в контейнере video просто:
|
1 2 3 4 5 6 7 8 |
// получаем HTML элемент var HTML5video = $(elm).find('video').get(0); // так можно отмотать к началу HTML5video.currentTime = 0; // вот так - поставить на паузу HTML5video.pause(); // и начать воспроизводить HTML5video.play(); |
Ролики Youtube и Vimeo
Здесь немного сложнее, так как подход заключается в отслеживании размеров фрейма, где воспроизводится видео ролик.
Фрейм ролика обернем, например в div, который задаёт «сцену» воспроизведения, отсекая лишнее как overflow: hidden. Для фрейма ролика нужно рассчитывать размеры и отступы так, чтобы видео-ролик полностью закрывал сцену и отображался по центру.
Для масштабирования потребуется знать размеры ролика, вернее пропорции. Обычно они составляют 16:9, но не всегда.
Код, пример, описание читайте подробнее в статьях:
- Адаптивная верстка фонового Youtube видео ролика.
- Адаптивная верстка фонового Vimeo видео ролика.