Привет всем! В этом материале я покажу, как сделать видео на заднем плане с помощью небольшого плагина.
Привет всем! В этом материале я покажу, как сделать видео на заднем плане с помощью небольшого плагина.
Пример вы можете найти здесь: http://vodkabears.github.io/vide/
Теперь заходите сюда: https://github.com/VodkaBears/Vide
Качайте архив.
На вашей странице подключите JQuery и скачанный плагин.
Подготовьте ваше видео в таких форматах, как .webm, .mp4 для кроссбраузерности. Также добавьте постер в .jpg, .png и .gif расширениях.
Добавьте data-vide-bg атрибут с путем к видео и постеру. Видео и постер должны иметь одинаковое имя.
Добавьте data-vide-options атрибут для опций, если вам нужно. По умолчанию видео без звука, зациклино и начинается автоматически.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
Также, вы можете сделать инициализацию через javascript.
$("#myBlock").vide('path/to/video', {
volume: 1, // звук
playbackRate: 1, // скорость воспроизведения
muted: true, // отключен ли звук
loop: true, // закцикливание
autoplay: true, // автовоспроизведение
position: "50% 50%" // выравнивание
});
У плагина также есть методы
// получить экземпляр плагина
var instance = $("#yourElement").data("vide");
// получить видео элемент заднего фона
instance.getVideoObject();
// изменение размера заднего видео
// это вызывается автоматически, если размер окна (или элемента, если вы будете использовать что-то вроде этого:
// https://github.com/cowboy/jquery-resize)
instance.resize();
// удаление экземпляра плагина
instance.destroy();
Вот такой простой плагин, который может быть использован, например, на странице описания какого-нибудь продукта или еще где.
Надеюсь, плагин вам понравился. Спасибо за внимание!
