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

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

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

Можешь почитать и вот эту статейку "Вкладки-Табы на CSS"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 32
  • Генерация страницы: 0.416сек
  • Потребление памяти: 5.242 Mb 
  •   Яндекс.Метрика