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

17 августа 2015 Антон Кулешов 1465 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
Читайте далее

Как узнать версию браузера, и зашел ли пользователь к нам на сайт с телефона

25 марта 2015 Антон Кулешов

is - библиотека проверок, которая позволяет решать ряд задач, стоящих перед веб-разработчиком. К примеру, таких как: как узнать браузер, с которого заходил пользователь, как узнать его операционную систему, он зашел с мобильного устройства или с персонального компьютера и многие другие.

Гистограммы и не только

8 сентября 2015 Антон Кулешов

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.

И еще 30 CSS эффектов при наведении

5 ноября 2015 Антон Кулешов

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на изображение. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.