Видео на заднем фоне

17 августа 2015 Антон Кулешов 1566 0

Как установить видео на заднем фоне сайта? На этот вопрос можно найти массу конкретных решений, а сегодня я расскажу про плагин videoBG, при помощи которого мы справимся с этой задачей в два счета. Для этого варианта нам понадобиться: сам плагин и небольшой отрезок видео (к примеру, если у вас сайт-визитка или лэндинг турагентства, то красивые волны на заднем фоне будут привлекать пользователя и ненавязчиво задерживать на ресурсе).

Реклама

VideoBG – это одно из решений, которое поможет нам добавить видео на задний фон. Внимание, мы будем использовать HTML5. К слову, в одной из ранних статьей я описывал ещё один интересный скрипт под названием vide. Он позволяет добавить видео и, в принципе, ни чем не хуже этого варианта.

Для начала работы с videoBG подключаем jQuery библиотеку и сам плагин:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.videoBG.js" type="text/javascript"></script>

HTML разметку по умолчанию добавлять не нужно, но, если вам потребуется добавить видео в фоне какого-то элемента, то просто применяем плагин videoBG относительно нужного тега. Давайте теперь воспользуемся плагином относительно элемента body:

$(function(){

	$("body").videoBG({
		position: "fixed",
		zIndex: 0,
		mp4: "christmasSnow.mp4",
		ogv: "christmasSnow.ogv",
		webm: "christmasSnow.webm",
		poster: "christmasSnow.jpg",
		opacity: 1,
		fullscreen: true
	});
});

У плагина есть свои настройки - некоторые, из которых обязательны для корректной работы videoBG! Ниже мы рассмотрим их:

  • mp4 – путь до mp4 файла (обязателен);
  • ogv – путь до ogv файла (обязателен);
  • webm – путь до webm файла (обязателен);
  • poster – путь до картинки, она нужна если не один из вышеперечисленных форматов не поддерживается браузером (обязателен);
  • autoplay – автовоспроизведение видео (true | false);
  • loop – цикл воспроизведения указывается число раз, если нужно прокручивать видео бесконечно, то указываем true;
  • sclae – отвечает за давления z-index к блоку с видео, если перевести в true то плагин сам будет изменять данное свойство, чтобы быть ниже остальных блоков;
  • position – отвечает за свойство позиционирования;
  • opacity – прозрачность видео;
  • fullscreen – при указание true видео будет растянуто на всю ширину и высоту встраимого блока;
  • zIndex – отвечает за свойство позиционирования z-index;
  • width – ширина видео;
  • height – высота видео.

Подводя итоги разбора решения videoBG хочется отметить: данный скрипт малого размера и обладает хорошей поддержкой браузеров. Настройка и установка проста и понятна, так что берём на заметку и используем для добавления видео задним фоном на сайт.

Реклама
Комментариев еще не оставлено
no_avatar