Воспроизведение видео из разных источников в качестве фона контейнера

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

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

Типичные требования следующие. Итак, видео-ролик должен:

  • проигрываться без звука,
  • закрывать собой весь контейнер, с учетом резиновой (responsive) верстки,
  • центрироваться и масштабироваться в контейнере,
  • скрывать по возможности все прочие элементы проигрывателя,
  • воспроизводится «по-кругу» без остановки,
  • воспроизводиться на популярных мобильных платформах, таких как, например, safari под iOS.

Технически так же должна быть возможность остановить ролик, чтобы программно запустить его сначала. Это нужно при показе ролика в качестве одного из слайдов, если он подгружен как фон в галерею.

  • реализация для разных источников видео.

Источники видео

Начнем с последнего требования. Я опишу подход реализации задачи по трем наиболее распространенным источникам видео:

  • файлы .mp4, (и другие форматы поддерживаемые HTML 5 контейнером video;
  • видео-ролики с Youtube, с использованием jQuery плагина jquery.mb.YTPlayer;
  • видео-ролики с Vimeo, с использованием jQuery плагина Vimeo Player API.

Выбор указанных плагинов должен позволить нам выполнить все остальные требования по крайней мере с технической точки зрения.

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

Фоновое mp4 видео в HTML 5 контейнере (тег video)

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

Подробнее см. в статье адаптивная верстка MP4 видео.

Управлять воспроизведением ролика в контейнере video просто:

Ролики Youtube и Vimeo

Здесь немного сложнее, так как подход заключается в отслеживании размеров фрейма, где воспроизводится видео ролик.

Фрейм ролика обернем, например в div, который задаёт «сцену» воспроизведения, отсекая лишнее как overflow: hidden. Для фрейма ролика нужно рассчитывать размеры и отступы так, чтобы видео-ролик полностью закрывал сцену и отображался по центру.

Для масштабирования потребуется знать размеры ролика, вернее пропорции. Обычно они составляют 16:9, но не всегда.

Код, пример, описание читайте подробнее в статьях:

Написать комментарий

Мало букафф? Читайте есчо !

Как войти в wordpress?

Октябрь 8, 2015 г.

Не все шаблоны одинаковы. Если вы поставили шаблон, который не показывает вам ссылок на админ панель, нет привычной формы авторизации - не паникуйте. Функционал wordpress остался на своем месте, только надо знать пути входа. Как войти в панель любого ...

Читать

Как в phpMyadmin увеличить размер импортируемого файла

Март 24, 2016 г.

Отличная утилита для администрирования баз данных phpMyAdmin используется как на профессиональных хостингах, так и начинающими веб-программистами. Этой ...

Читать

 

Комментарии к «Воспроизведение видео из разных источников в качестве фона контейнера»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: