Создание полноэкранного видео слайд шоу на jQuery

BigVideo.js - jQuery плагин, который упрощает создание полноэкранного адаптивного видео слайдшоу. Вы можете использовать одно или несколько видео, либо использовать данный плагин в качестве проигрывателя, с отображением плей-листа.

Сложность

В этом учебном руководстве мы создадим видео jQuery слайд шоу, в котором будем показывать бесплатные HD видеоматериалы и анимированные фоны, доступные на сайте Beachfront B-Roll.

Прежде чем мы начнем, давайте поговорим об использовании этого метода для проекта в целом. Видео слайдшоу сильно влияет на загрузку страницы и может ухудшить производительность браузера. Если загрузка сайта важный параметр для вашего проекта, то хорошенько подумайте перед использованием этого метода. Возможно что для Вашего проекта больше подойдет метод cinemagraphs. В любом случае, это учебное руководство очень полезное, поскольку я также расскажу вам как работать с большими фоновыми изображениями.

В самом начале вы должны получить видеоконтент. Для этого мы переходим на сайт Beachfront B-Roll и загружаем несколько бесплатных видео. Некоторые из них имеют слишком большой размер файла, поэтому я использовал утилиту Quicktime Pro, чтобы обрезать их, приблизительно до 10 секунд. Для каждого видео создадим обложку (первый кадр видео), для этого я использовал Photoshop, для создания изображения размером 960×540 jpeg. Я применил размытость со значением 5px и сохранил с качеством изображения 50%, чтобы получить меньший размер файла.

HTML разметка

Для начала создадим разметку страницы:

На странице у нас будет заголовок центре экрана, основной контейнер, который содержит все видео файлы, кнопка, для переключения видео файлов.

<header>
    <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1>
    <p>The videos in this demo are from <a href="http://beachfrontprod.blogspot.com" target="_blank">Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p>
    <p><small>A demo for</small> <a href="http://dfcb.github.com/BigVideo.js/" target="_blank">BigVideo.js</a> <small>by <a href="http://twitter.com/johnpolacek" target="_blank" rel="author">@johnpolacek</a></small></p>
</header>
 
<div class="wrapper">
    <div class="screen" id="screen-1" data-video="vid/bird.mp4">
        <img src="/img/bird.jpg" class="big-image" />
        <h1 class="video-title">#1 Bird</h1>
    </div>
    <div class="screen" id="screen-2" data-video="vid/satellite.mp4">
        <img src="/img/satellite.jpg" class="big-image" />
        <h1 class="video-title">#2 Satellite</h1>
    </div>
    <div class="screen" id="screen-3" data-video="vid/camera.mp4">
        <img src="/img/camera.jpg" class="big-image" />
        <h1 class="video-title">#3 Camera</h1>
    </div>
    <div class="screen" id="screen-4" data-video="vid/spider.mp4">
        <img src="/img/spider.jpg" class="big-image" />
        <h1 class="video-title">#4 Spider</h1>
    </div>
    <div class="screen" id="screen-5" data-video="vid/dandelion.mp4">
        <img src="/img/dandelion.jpg" class="big-image" />
        <h1 class="video-title">#5 Dandelion</h1>
    </div>
</div>

CSS

Прежде, чем работать с видео, мы должны настроить стиль страницы.

Так как вся навигация это – одна большая кнопка, мы установим свойство overflow: hidden и сделаем весь текст на странице белым.

html, body {
    margin: 0;
    padding: 0;
    color: #fff;
    overflow: hidden;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    font-weight: 300;
    font-size: 1em;
}

Затем для контейнера установим ширину в 500% и высоту в 100%. Для перемещения по странице мы анимируем позицию контейнера, для этого воспользуемся абсолютным расположением. Для контейнера зададим z-index со значением 0, чтобы разместить контент в фоновом режиме.

.wrapper {
    position: absolute;
    width: 500%;
    height: 100%;
    z-index: 0;
}

Разместим заголовок по центру страницы. Кроме того, зададим для него высокий z-index, для того чтобы он оставался поверх нашего фонового контента.

header {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 60px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: -200px 0 0 -200px;
    text-align: center;
}

Нам нужно, чтобы каждый слайд полностью заполнял высоту и ширину экрана, поэтому мы устанавливаем высоту в 100% и ширину в 100% и разделим на количество слайдов. Расположим их относительно, чтобы была возможность манипулировать контентом в пределах экрана. Разместим изображения по центру экрана и установим overflow: hidden.

.screen {
    position: relative;
    height: 100%; 
    width: 20%; 
    float: left;
    overflow: hidden;
}

В контейнерах для видео, у нас есть большое изображение первого кадра и его заголовок. Для изображения мы зададим минимальную ширину, минимальную высоту, чтобы удостовериться, что размер изображения не меньше, чем размер контейнера видео (который является размером окна браузера).

.big-image {
    min-width: 100%;
    min-height: 100%; 
    height: auto;
    width: auto; 
}

разместим заголовки в верхнем левом углу, зададим большой размер шрифта и 50% прозрачность.

.video-title {
    position: absolute;
    bottom: 5%;
    left: 5%;
    opacity: .5;
    margin: 0;
    padding: 0;
    line-height: .65;
    font-size: 4em;
    text-transform: uppercase;
}

Перейдем к навигации. Я сделал кнопку со стрелкой на CSS, используя метод с вертикальными рамками, а затем повернул их на 45 градусов и поместил в контейнер с большим border-radius (окружность).

(nav {
    position:absolute; 
    right: 5%; 
    top: 45%; 
    padding: 20px; 
    background: #000; 
    border-radius: 40px; 
    opacity: .4; 
    cursor: pointer;}
    nav: hover {
    opacity: .6;
}
 
.next-icon {
    display: block;
    border-top: solid 2px #fff; 
    border-right: solid 2px #fff; 
    width: 20px; 
    height: 20px;
    position: relative;
    left: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #fff;
    text-decoration: none;
}

jQuery слайд шоу

Для начала подключим все необходимые скрипты. Загрузите BigVideo.js. В дополнение к BigVideo.js, также мы будем использовать библиотеку jQuery Transit для анимации.

<!-- BigVideo зависимость -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/js/jquery-1.7.2.min.js"><\/script>')</script>  <script src="/js/jquery-ui-1.8.22.custom.min.js"></script>
  <script src="/js/jquery.imagesloaded.min.js"></script>
  <script src="http://vjs.zencdn.net/c/video.js"></script>
  
  <!-- BigVideo -->
  <script src="/js/bigvideo.js"></script>
  
  <!-- Демо -->
  <script src="/js/jquery.transit.min.js"></script>

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

code,javascript $(function() {
    var screenIndex = 1,
    numScreens = $('.screen').length,
    isTransitioning = false,
    transitionDur = 1000;
}

Для чего нужны эти переменные:

  • screenIndex – отслеживает, на какой экран мы смотрим
  • numScreens – число экранов (в нашем случае 5)
  • isTransition – булевская переменная, чтобы предотвратить второй щелчок в навигации
  • transitionDur – скорость прокрутки анимации

Теперь, добавьте событие onclick и обратный вызов, для навигации.

$('#next-btn').on('click', function(e) {
    e.preventDefault();
    if (!isTransitioning) {
        next();
    }
});
 
function next() {
    isTransitioning = true;
     
    // обновление видео индекса
    if (screenIndex === numScreens) {
        screenIndex = 1;
    } else {
        screenIndex++;
    }
     
    $('.wrapper').transit(
        {'left':'-'+(100*(screenIndex-1))+'%'},
        transitionDur,
        onTransitionComplete);
 
}
function onTransitionComplete() {
    isTransitioning = false;
}

Теперь для навигации необходимо задать время воспроизведения видео. При создании видео сайта важно учесть мобильные устройства. Как правило они не поддерживают автоматическое воспроизведение, это означает, что видео слайдшоу не будет работать. Есть несколько решений этой проблемы, но мы должны также учесть, что у мобильного пользователя более низкая пропускная способность интернета. Один из способов - предоставить не видеоконтент, для этого мы будем использовать Modernizr.

Во-первых, добавим переменную для BigVideo (BV) и isTouch вначале нашего скрипта.

var screenIndex = 1,
    numScreens = $('.screen').length,
    isTransitioning = false,
    transitionDur = 1000,
    BV,
    isTouch = Modernizr.touch;

Затем, инициализируем BigVideo для несенсорных устройств. Создайте функцию showVideo (), где мы воспроизводим видео из filepath атрибута data-video для текущего экрана. Добавьте вызов showVideo () к функции onTransitionComplete для обратного вызова. Кроме того, когда видео загружено и готово для воспроизведения, мы должны постепенно убрать изображение framegrab. Чтобы сделать это, мы используем API Video.js, чтобы добавить событие loadeddata проигрывателя BigVideo.

var screenIndex = 1,
    numScreens = $('.screen').length,
    isTransitioning = false,
    transitionDur = 1000,
    BV,
    isTouch = Modernizr.touch;
 
// нажатие кнопки перейдет к следующему div
$('#next-btn').on('click', function(e) {
    e.preventDefault();
    if (!isTransitioning) {
        next();
    }
});
 
if (!isTouch) {
    // инициализация BigVideo
    BV = new $.BigVideo({forceAutoplay:isTouch});
    BV.init();
    showVideo();
     
    BV.getPlayer().addEvent('loadeddata', function() {
        onVideoLoaded();
    });
 
    // настройка изображения
    $bigImage
        .css('position','relative')
        .imagesLoaded(adjustImagePositioning);
    // изменение размеров окна
    $(window).on('resize', adjustImagePositioning);
}
 
// нажатие кнопки перейдет к следующему div
$('#next-btn').on('click', function(e) {
    e.preventDefault();
    if (!isTransitioning) {   
        next();
    }
});
 
function showVideo() {
    BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
}
 
function next() {
    isTransitioning = true;
     
    // обновление видео индекса и сброс непрозрачности
    if (screenIndex === numScreens) {
        $bigImage.css('opacity',1);
        screenIndex = 1;
    } else {
        screenIndex++;
    }
     
    if (!isTouch) {
        $('#big-video-wrap').transit({'left':'-100%'},transitionDur)
    }
         
    $('.wrapper').transit(
        {'left':'-'+(100*(screenIndex-1))+'%'},
        transitionDur,
        onTransitionComplete);
}
 
function onVideoLoaded() {
    $('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},200)
}
 
function onTransitionComplete() {
    isTransitioning = false;
    if (!isTouch) {
        $('#big-video-wrap')
            .css('left',0);
        showVideo();
    }
}

Обратите внимание, что изображение и видео находятся не в одной строке во время исчезновения анимации. Это связано с тем, что видео находится по центру экрана. Чтобы решить проблему, нам нужно разместить по центру изображение. Для этого создаем функцию, которая корректирует расположение изображений.

code.javascriptfunction adjustImagePositioning() {
    $bigImage.each(function(){
        var $img = $(this),
            img = new Image();
 
        img.src = $img.attr('src');
 
        var windowWidth = $window.width(),
            windowHeight = $window.height(),
            r_w = windowHeight / windowWidth,
            i_w = img.width,
            i_h = img.height,
            r_i = i_h / i_w,
            new_w, new_h, new_left, new_top;
 
        if( r_w > r_i ) {
            new_h   = windowHeight;
            new_w   = windowHeight / r_i;
        }
        else {
            new_h   = windowWidth * r_i;
            new_w   = windowWidth;
        }
 
        $img.css({
            width   : new_w,
            height  : new_h,
            left    : ( windowWidth - new_w ) / 2,
            top     : ( windowHeight - new_h ) / 2
        })
 
    });
 
}

Вызовите функцию в готовом документе.

$bigImage
    .css('position','relative')
    .imagesLoaded(adjustImagePositioning);
// размеры окна
$(window).on('resize', adjustImagePositioning);

Теперь изображение и видео должны быть выровнены.

ДЕМО СКАЧАТЬ Перевод статьи Fullscreen Video Slideshow with BigVideo.js

 

Тэги: videoslideshowplugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.