• 3055
  • 4
  • Автор: John Polacek
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

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">
3.Подключаем скрипты
Код:
<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>
2.Чтобы проигрывать видео, которое занимает все окно браузера (как в данном примере ):
Код:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('mp4/oceans.mp4');
});
3.Для достижения наилучших результатов в Firefox, создать версию Ogg вашего видео и настроить BigVideo.js
Код:
$(function() {
var BV = new $.BigVideo({useFlashForFirefox:false});
BV.init();
BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});
4.Для воспроизведения тихого видео на фоне страницы (как в данном примере ), используйте параметр :
Код:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('mp4/oceans.mp4',{ambient:true});
});
5.Или играть серию видео (как в этом примере )
Код:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
6.Имейте в виду, что мобильные устройства не позволяют видео авто запуск. Для этого, используйте Modernizr для обнаружения устройств с сенсорными экранами, а затем отправить на изображение для BigVideo
Код:
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('video-poster.jpg');
} else {
BV.show('video.mp4',{ambient:true});
7.Вы можете создать список воспроизведения, как это:
Код:
  <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>
8.Ну более подробно можете посмотреть на источнике

Можешь почитать и вот эту статейку "FileZilla"

mistakes

Это тоже интересно

    irbees2008

    irbees2008 | 18.09.2015 - 22:15

    newest, все работает только скачал и проверил,проверяй пути подключения скриптов и стилей

    ответить

    newest

    newest | 18.09.2015 - 21:22

    Действительно, в архиве нет CSS файла. Скачал с источника, но проблема не решилась. Буду гуглить.

    ответить

    irbees2008

    irbees2008 | 18.09.2015 - 19:40

    newest, Смотри стили,может что то не подключил,так наобум сказать не могу смотреть надо

    ответить

    newest

    newest | 18.09.2015 - 17:54

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

    ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Вы нашли что искали?
Результаты

----