Lecaw

Учимся создавать Web-сайты

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

September 26, 2012 584hits
 
 

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

Исходные файлы ДЕМО

 

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

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

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

HTML разметка

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

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

<header>
<h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1>
<p>The videos in this demo are from <a href="#" 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="#" target="_blank">BigVideo.js</a> <small>by <a href="#" 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 нуля, чтобы сохранить контент оболочки в фоновом режиме.

.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;
}

JavaScript слайдшоу

Здесь мы будем подключать наши видео материалы. Для начала подключим все необходимые сценарии. Загрузите BigVideo.js Github Repo. В дополнение к 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>

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

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

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

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

Теперь, добавьте событие нажатия кнопки и обратный вызов, чтобы добавить навигацию.

$('#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();
    }
}

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

function 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);

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

Исходные файлы ДЕМО

 

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий