✭ Як додати відео фон на свій сайт? ✭

5/51 rating

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

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

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

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

Скрипт відео фону для сайту який ми вам хочемо запропонувати має велику особливість в тому що відео фон автоматично підлаштовується під всі розміри екранів пристроїв. Повноекранний відео фон для сайту зроблений на 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});
}