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

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

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

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

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

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

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

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

Устанавливаем видео с youtube/vimeo на задний фон

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

Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов. Плагины позволяют подставить в бекграунд ...

Читать

Получение превью (картинки) для видео vimeo

Август 23, 2019 г.

Рассмотрим как получить thumbnail для видео vimeo, если у вас есть только url видоса. Vimeo позволяет извлечь мета информацию о видео, используя video id. Потому мы сначала выделим id, а потом выполним запрос к API Vimeo за дополнительной информацией, ...

Читать

 

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

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



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