✭ Как добавить видео фон на свой сайт? ✭

5/53 оценки

Доброго времени суток дорогой посетитель. Прошло уже достаточно много времени от последней моей публикации, за что очень сильно извиняюсь и обещаю исправиться, из за плотного графика по разработке сайтов, а так же личные семейные обстоятельства отнимают основную часть моего драгоценного времени.

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

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

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

Скрипт видео фона для сайта который мы вам хотим предоставить имеет большую особенность в том что видео фон автоматически подстраивается под все размеры экранов устройств. Полноэкранный видео фон для сайта сделан на HTML5 с использованием библиотек jQuery, jQuery UI и jQuery imagesloaded. Ну, а благодарить за этот чудесный скрипт стоит Чикагского веб-разработчика John Polacek.

Ну что же краткую информацию я описал, а теперь давайте рассмотрим как создать видео фон для сайта с примерами, ну что же поехали.

Для работы видео фона у вас должен быть подключен jQuery, убедитесь что он у вас подключен при использовании Данного скрипта. Чтобы просто воспроизвести видео, которое занимает все окно браузера, сделайте следующее:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('vids/oceans.mp4');
});

$(function() {

var BV = new $.BigVideo();

BV.init();

BV.show('vids/oceans.mp4');

});

Для видео переходов вам нужно включить исходный порядок с различными видео форматами. Обратитесь к этому примеру.

$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
	BV.init();
    BV.show([
        { type: "video/mp4",  src: "vids/river.mp4" },
        { type: "video/webm", src: "vids/river.webm" },
        { type: "video/ogg",  src: "vids/river.ogv" }
    ]);
});

$(function() {

var BV = new $.BigVideo({useFlashForFirefox:false});

BV.init();

BV.show([

{ type: "video/mp4", src: "vids/river.mp4" },

{ type: "video/webm", src: "vids/river.webm" },

{ type: "video/ogg", src: "vids/river.ogv" }

]);

});

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

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('vids/oceans.mp4',{ambient:true});
});

$(function() {

var BV = new $.BigVideo();

BV.init();

BV.show('vids/oceans.mp4',{ambient:true});

});

Или можно воспроизвести серию фоновых видео:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show(['vids/vid1.mp4','vids/vid2.mp4','vids/vid3.mp4'],{ambient:true});
});

$(function() {

var BV = new $.BigVideo();

BV.init();

BV.show(['vids/vid1.mp4','vids/vid2.mp4','vids/vid3.mp4'],{ambient:true});

});

Обратите внимание, что мобильные устройства не поддерживают автозапуск видео. Чтобы учесть это, используйте Modernizr для обнаружения устройств с сенсорным экраном, затем отправьте большое изображение для использования скрипта видео фона.

var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
    BV.show('img/video-poster.jpg');
} else {
    BV.show('vids/video.mp4',{ambient:true});
}