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

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

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

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

  • проигрываться без звука,
  • закрывать собой весь контейнер, с учетом резиновой (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, но не всегда.

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

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

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

Вставляем объект views в нужное место шаблона средствами PHP

Сентябрь 9, 2016 г.

Мощный, всепоглощающий, великий и ужасный модуль VIEWS. Очень коварный, он толкает программиста с пути "только хардкор" и разработки на PHP на скользкую ...

Читать

Ошибка конфига varnish VCL “Symbol not found: std....”

Май 24, 2018 г.

После std идет название какой либо функции стандартной библиотеки VCL. Скорее всего проблема в том, что вы не подключили std в вашей конфигурации (часто встречается при миграции конфигов). Для подключения библиотек в Си используется директива import. ...

Читать

 

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

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



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