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

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

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

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

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

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

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

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

Заполнение поля формы через GET в Drupal 7

Июнь 23, 2011 г.

Рассмотрим случай, когда нужно предварительно заполнить поле (ряд полей) формы при переходе на страницу с этой формой в Drupal. Данные для инициализации передаём как часть uri (т.е. метод GET). Подход проверен для Drupal 7. [crayon-5bf03d312c8d3481423842/]

Читать

Подключение CSS/JS к форме Drupal

Октябрь 12, 2017 г.

Если необходимо подключить стили или скрипты к своей форме, как это сделать? Первый подход - добавить необходимые стили и скрипты в тему оформления. В этом случае, если к примеру, идет речь о форме редактирования, которая отображается в шаблоне ...

Читать

 

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

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



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