Русский
Українська
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});
}
|
Ну вот собственно и все, наш видео фон для сайта готов. Пользуйтесь на здоровье.
Так же вы можете скачать готовые исходники ниже.
Нет комментариев
Вы можете оставить комментарий первым.