Создание интерактивной видео-витрины с помощью API видео

Обновление индикатора выполнения во время воспроизведения

Так как мы хотим, чтобы индикатор выполнения часто обновлялся, мы не можем поместить его в функцию timeupdate (поскольку браузер определяет, как вызывается offen). Вместо этого мы вызываем setInterval и присваиваем его нашей переменной videoInterval . Каждые 100 мс мы будем вызывать функцию updateProgressAuto и передавать текущее воспроизводимое видео.

 setInterval(function(){ updateProgressAuto(video); }, 100); 

Автоматическое обновление индикатора выполнения с помощью UpdateProgressAuto

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

 function updateProgressAuto(video){ var videoBar = $(video).siblings('.progress-bar'); var videoPercent = ((video[0].currentTime / video[0].duration ) * 100); videoBar.find('.progress').css('width', videoPercent + '%'); videoBar.find('.progress-value').html(parseFloat(video[0].currentTime).toFixed(2) + ' : ' + parseFloat(video[0].duration).toFixed(2)); videoBar.find('.progress-time').html(parseInt(videoPercent) + '%'); } 

Вот что происходит.

• Мы получаем элемент индикатора выполнения и videoPercent время видео по его duration и умножая на 100.
• Мы обновляем ширину индикатора выполнения, чтобы отразить currentTime процентах
• Мы обновляем текущее время / продолжительность видео, чтобы точно знать, когда оно закончится.
• Мы обновляем процент, показанный на видео панели, с текущим процентом.

Событие OnEnded

Когда текущее видео заканчивается, оно вызывает событие onEnded . Именно здесь мы переключим активный класс на контейнер nextVideo а затем вызовем его функцию воспроизведения, чтобы начать воспроизведение.

 video[0].onended = function() { nextVideo.parents('.video-container').addClass('active'); video.parents('.video-container').removeClass('active'); nextVideo[0].play(); }; 

Обновление воспроизведения видео вручную

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

Мы связываем несколько обработчиков событий с событиями click , mousedown , mouseup и mousemove для переменной videoBar . Цель этого состоит в том, чтобы перевести позицию щелчка / позицию перетаскивания мыши, чтобы обновить позицию видео.

 //seeking with the video bar videoBar.on('click', function(e){ updateProgressManual((e.pageX - $(this).offset().left) , video); }); //mouse moving videoBar.on('mousedown',function(e) { dragging = true; updateProgressManual(e.pageX - $(this).offset().left, video); }); //mouse up (choose time to seek to) videoBar.on('mouseup',function(e) { dragging = false; updateProgressManual(e.pageX - $(this).offset().left, video); }); //mouse dragging (actively seeking) videoBar.on('mousemove',function(e) { if(dragging === true){ updateProgressManual(e.pageX - $(this).offset().left, video); } }); 

Все эти события вызывают функцию updateProgressManual , которая обновляет время воспроизведения видео. Значение, которое мы соберем, будет текущей позицией pageX минус текущее левое offset видеобара (что даст нам правильное положение на индикаторе выполнения)

Обновление воспроизведения вручную с помощью функции UpdateProgressManual

Эта функция вызывается, когда мы вручную ищем текущее видео. Его цель — получить позицию, на которую щелкнули, и преобразовать ее во время, к которому видео должно стремиться.

 //Manually updates the video when we seek using the progress bar function updateProgressManual(progressBarPosition, video){ var videoBar = $(video).siblings('.progress-bar'); var videoPercentage = ((progressBarPosition / videoBar.outerWidth()) * 100); videoBar.find('.progress').css('width', videoPercentage + '%'); videoBar.find('.progress-value').html(parseFloat(video[0].currentTime).toFixed(2) + " : " + parseFloat(video[0].duration).toFixed(2)); videoBar.find('.progress-time').html(parseInt(videoPercentage) + '%'); video[0].currentTime = ((video[0].duration * videoPercentage) / 100); } 

Вот разбивка того, что происходит

• Мы рассчитываем videoPercentage , получая ток, переданный в позиции, и деля его на outerWidth времени видеобара на 100. Это скажет нам, какой процент мы хотим искать.
• Мы устанавливаем ширину элемента progress внутри videoBar в процентах, к которым мы стремимся.
• Мы также хотим обновить время визуального воспроизведения в баре. Это делается путем получения currentTime и duration видео
• Наконец, мы устанавливаем значение currentTime для видео, чтобы оно вызывало указанный период времени.

Дополнительная функциональность

У слайдера также есть несколько других функций, которые могут оказаться полезными.

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

Мы также проверяем, перемещаете ли вы мышь на область caption и ее элементы. Если заголовок в настоящее время активен, он будет замедлять видео через свойство playbackRate (делая воспроизведение в два раза быстрее). Когда мы убираем мышь, видео возвращается к нормальной скорости.

 //When hovering over progress bar, pause video and restyle videoBar.on('mouseover', function(){ $(this).siblings('.progress-overlay').addClass('active'); $(this).addClass('expanded'); video[0].pause(); }); //When not hovering, unpause video and restyle back to normal videoBar.on('mouseout', function(){ $(this).siblings('.progress-overlay').removeClass('active'); $(this).removeClass('expanded'); video[0].play(); }); //if we have caption elements, slow playback on hover if(captionItems.length !==0){ video.parents('.video-container').on('mouseover','.caption.active', function(){ video[0].playbackRate = 0.5; }); video.parents('.video-container').on('mouseout','.caption.active', function(){ video[0].playbackRate = 1; }); } 

Наш мобильный только резервный контент

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

Большая часть функциональности похожа на то, как мы обрабатывали каждое видео. Мы ищем все его элементы и затем определяем, когда их нужно добавить.

 var fallbackInterval = setInterval(function(){ currentTime = (parseInt(currentTime) + timeInterval); fallbackElements.each(function(){ var animationPercent = parseInt($(this).attr('data-animation-percent')); if((currentTime / animationDuration * 100) >= animationPercent){ $(this).addClass('active'); } else { $(this).removeClass('active'); } }); //if we have any caption elements faded in if(fallbackElements.filter('.active').length !== 0){ fallbackElements.parents('.caption').addClass('active'); } //if we have ended, finish if(currentTime >= animationDuration){ clearInterval(fallbackInterval); } }, timeInterval); 

Давайте пройдемся по тому, что происходит

• Мы находим fallback и fallbackElements и устанавливаем fallback контейнер для активации.
• Мы устанавливаем currentTime в 0 что дает нам время начала. Затем мы устанавливаем animationDuration на 5000 чтобы указать, что полная анимация займет 5 секунд. Наконец, мы устанавливаем timeInterval равным 50 что означает, что каждые 50 мс мы будем иметь обновление.
• Мы создаем наш основной цикл с помощью функции setInterval (присваивая его нашей переменной fallbackInterval ). Мы устанавливаем интервал для запуска каждые 50 мс.
• Внутри основного интервала мы получаем новое текущее время (добавляя timeInterval к переменной currentTime ).
• Мы проверяем каждый из элементов заголовка по отношению к проценту этого нового времени, чтобы увидеть, должны ли мы активировать этот элемент.
• Если наш currentTime больше нашего animationDuration мы fallbackInterval используя clearInterval, чтобы завершить все.

демонстрация

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