Наверняка вы видели сайты, на заднем фоне которых проигрывалось видео. В этой статье мы рассмотрим один из способов, как применить такой эффект в своих проектах.
Для достижения желаемого результата нам поможет 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%;
}
Надеюсь, плагин вам понравился, и не возникло проблем с установкой.