• 3610
  • 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.Ну более подробно можете посмотреть на источнике

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

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

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

    ответить

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

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element