BigVideo.js - это jQuery-плагин для добавления в качестве фона видео или больших изображений. Этот плагин позволяет легко добавить видео-ролик, заполняющий весь фон на веб-сайте. Он может проигрывать бесшумное фоновое видео (или ряд видео) или использоваться как плеер, с возможностью добавления плей-листов.
BigVideo.js может также отображать большие фоновые изображения, в случае если ваше устройство не умеет проигрывать видео в качестве фона. BigVideo.js использует Video.js API. Он также требует jQuery, jQuery UI (для ползунка) и плагин jQuery imagesloaded.
Итак приступим к установке
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и заливаем в папку с шаблоном.
2.Подключаем стиль для нашего фона
<link rel="stylesheet" href="{{ tpl_url }}/css/bigvideo.css"><script> window.jquery || document.write('<script src="{{ tpl_url }}/js/jquery.min.js"><\/script>')</script>
<script src="{{ tpl_url }}//js/jquery-ui.js"></script>
<script src="{{ tpl_url }}//js/video.js"></script>
<script src="{{ tpl_url }}//js/bigvideo.js"></script>
<script>
var BV;
$(function() {
// initialize BigVideo
BV = new $.BigVideo();
BV.init();
BV.show('{{ tpl_url }}/mp4/oceans.mp4',{ambient:true});
// Playlist button click starts video
$('.playlist-btn').on('click', function(e) {
e.preventDefault();
BV.show($(this).attr('href'));
})
// Video Play/Pause toggle
$('#video-toggle').on('click', function(e) {
if (this.checked) BV.getPlayer().play();
else BV.getPlayer().pause();
})
// set up navigation
$('.nav-link').on('click',function(e){
e.preventDefault();
scrollToSection($(this).attr('href'));
})
function scrollToSection(id) {
$('body,html').animate({scrollTop: $(id).offset().top - 50}, 400);
}
});
</script>4.Настройки:
1.Чекбокс поставить на паузу можете увидеть в демо
<label><input type="checkbox" checked id="video-toggle" /> Проигрывание видео</label>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('mp4/oceans.mp4');
});$(function() {
var BV = new $.BigVideo({useFlashForFirefox:false});
BV.init();
BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('mp4/oceans.mp4',{ambient:true});
});$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('video-poster.jpg');
} else {
BV.show('video.mp4',{ambient:true});
<div class="playlist">
<a href="mp4/dock.mp4" class="playlist-btn">Video #1</a>
<a href="mp4/river.mp4" class="playlist-btn">Video #2</a>
<a href="mp4/frontier.mp4" class="playlist-btn">Video #3</a>
</div>
Можешь почитать и вот эту статейку "Кнопка позвонить от Skype "
Это тоже интересно
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить