Хаки и Скрипты Next Generation CMS

BigVideo.js - это jQuery-плагин для добавления в качестве фона видео

irbees2008 irbees2008 Опубликовано - 14 - апреля Интерфейс
4882 - 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.Ну более подробно можете посмотреть на источнике

Можешь почитать и вот эту статейку "Вставить во всех новостях разделитель"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 1.497сек
  • Потребление памяти: 6.376 Mb 
  •   Яндекс.Метрика