Показать Меню
falbar HTML5 видео на заднем фоне

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

HTML5 видео на заднем фоне

Как установить видео на заднем фоне сайта? На этот вопрос можно найти массу конкретных решений, а сегодня я расскажу про плагин 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>:

<script type="text/javascript">
$(function(){

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

У плагина есть свои настройки - некоторые, из которых обязательны для корректной работы 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 хочется отметить: данный скрипт малого размера и обладает хорошей поддержкой браузеров. Настройка и установка проста и понятна, так что берём на заметку и используем для добавления видео задним фоном на сайт.

Источник
videoBG

Подписаться на обновления

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