Русский
Українська
English
Доброго времени суток дорогой посетитель. Прошло уже достаточно много времени от последней моей публикации, за что очень сильно извиняюсь и обещаю исправиться, из за плотного графика по разработке сайтов, а так же личные семейные обстоятельства отнимают основную часть моего драгоценного времени.
Сегодня я снова хочу предложить вам интересный скрипт видео фона для сайта, который легко устанавливается на любой сайт, имеет простую структуру, а так же есть возможность менять фоновое видео в виде слайдов с определенным промежутком времени, демонстрация видео фона как всегда внизу страницы .
С каждым днем в сети интернет появляется огромное количество новых сайтов, и каждый его владелец хочет выделится в глазах посетителя, ну и конечно же обойти своего конкурента, сделать свой сайт более привлекательным и удобным для пользователя. Так вот, внедрить на сайт видео фон это одна из фишек которая сделает ваш сайт более привлекательным.
В данной статье мы как раз и рассмотрим нестандартный подход к созданию современного и стильного сайта, собственно такой вопрос как создать фон для сайта у вас уже не будет стоять. Этот плагин видеофона позволит с легкостью добавлять фоновое видео для любых веб-сайтов, он может воспроизводить тихое фоновое видео или целую серию видео, с плавной их заменой.
Скрипт видео фона для сайта который мы вам хотим предоставить имеет большую особенность в том что видео фон автоматически подстраивается под все размеры экранов устройств. Полноэкранный видео фон для сайта сделан на HTML5 с использованием библиотек jQuery, jQuery UI и jQuery imagesloaded. Ну, а благодарить за этот чудесный скрипт стоит Чикагского веб-разработчика John Polacek.
Ну что же краткую информацию я описал, а теперь давайте рассмотрим как создать видео фон для сайта с примерами, ну что же поехали.
Для работы видео фона у вас должен быть подключен jQuery, убедитесь что он у вас подключен при использовании Данного скрипта. Чтобы просто воспроизвести видео, которое занимает все окно браузера, сделайте следующее:
|
1 2 3 4 5 |
$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('vids/oceans.mp4'); }); |
Для видео переходов вам нужно включить исходный порядок с различными видео форматами. Обратитесь к этому примеру.
|
1 2 3 4 5 6 7 8 9 |
$(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" } ]); }); |
Для воспроизведения беззвучного видео на заднем фоне страницы используйте настройку окружения:
|
1 2 3 4 5 |
$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('vids/oceans.mp4',{ambient:true}); }); |
Или можно воспроизвести серию фоновых видео:
|
1 2 3 4 5 |
$(function() { var BV = new $.BigVideo(); BV.init(); BV.show(['vids/vid1.mp4','vids/vid2.mp4','vids/vid3.mp4'],{ambient:true}); }); |
Обратите внимание, что мобильные устройства не поддерживают автозапуск видео. Чтобы учесть это, используйте Modernizr для обнаружения устройств с сенсорным экраном, затем отправьте большое изображение для использования скрипта видео фона.
|
1 2 3 4 5 6 7 |
var BV = new $.BigVideo(); BV.init(); if (Modernizr.touch) { BV.show('img/video-poster.jpg'); } else { BV.show('vids/video.mp4',{ambient:true}); } |
Ну вот собственно и все, наш видео фон для сайта готов. Пользуйтесь на здоровье.
Так же вы можете скачать готовые исходники ниже.
Нет комментариев
Вы можете оставить комментарий первым.