Делаем видео на заднем фоне с помощью jQuery

10 сентября 2014 Антон Кулешов 4188 0

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

Реклама

Для достижения желаемого результата нам поможет jQuery плагин под названием vide, поэтому заходим на сайт плагина и скачиваем его.

После того как мы скачали плагин нам нужно будет подготовиться перед его использованием. Для этого необходимо заранее cконвертировать видео в такие форматы как webm, mp4 и ogv. Так же для полной кроссбраузерности делаем постер в одном из форматов: jpg, png или gif.

Завершив с подготовкой, подключаем jQuery библиотеку и сам скрипт.

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

Все файлы, что мы подготовили, закидываем в нужную нам папку (в моём случае её нет) и указываем им одно имя, сохраняя свои расширения.

Теперь в блоке, в котором будет размещаться видео необходимо указать два атрибута data-vide-bg (путь до файлов) и data-vide-options (настройки работы плагина). К слову, второй атрибут не обязателен, если мы его пропустим, то настройки по умолчанию будут: видео без звука, зациклено, начинаться автоматически.

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

При работе с плагинам мы также может указывать все настройки непосредственно через JavaScript.

$("#video").vide("ocean",{
	volume: 1, 		// звук
	playbackRate: 1, 	// скорость воспроизведения
	muted: true, 		// отключен ли звук
	loop: true, 		// зацикливание
	autoplay: true, 	// автовоспроизведение
	position: "50% 50%"	// выравнивание
});

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

// получить экземпляр плагина
var instance = $("#yourElement").data("vide");

// получить видео элемент заднего фона
instance.getVideoObject();

// изменение размера заднего видео
instance.resize();

// удаление экземпляра плагина
instance.destroy();

Возможно, при установке vide вы столкнётесь с проблемой: добавляется свойство позиционирования к блоку, где размещено видео. Это может помешать растянуть видео на весь экран. Добавив следующие свойства, всё станет на свои места.

html,body{
	margin: 0;
}
#video{
	position: absolute;
	width: 100%;
	height: 100%;
}

Надеюсь, плагин вам понравился, и не возникло проблем с установкой.

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

Прогон по каталогам – мифы и реальность

12 июня 2015 ti1schweiger

Добавить сайт в Яндекс Каталог – цель любого веб-мастера. Для молодого начинающего блогера – это признание его заслуг, для матерого продвиженца – рутинная часть работы, потому как, серьёзно продвигаемый проект просто обязан попасть в Яндекс Каталог, если вы вбухали солидную сумму в SEO, то подобную опцию можно потребовать как подтверждение проделанной работы. Что же нам дает попадание нашего сайта в Яндекс Каталог и стоит ли игра свеч? Давайте разберемся.

SMTP сервер для отправки писем с сайта если функция mail не работает

9 апреля 2016 Антон Кулешов

Довольно распространенное явление на просторах бесплатных хостингов – когда не работает функция mail() или работает как-то странно. Что же делать в этом случае? Ответ простой - воспользоваться отправкой писем через SMTP протокол, но для этого нам нужен уже готовый и написанный код. Совсем недавно подключая доменную почту на falbar, я сделал «маленькую выжимку из поисковой выдачи» и не найдя подходящего решения написал собственный класс, который, я думаю, будет полезен не только мне.

Ещё одно адаптивное меню

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

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