От автора: если вы заходили последнее время на медиа сайты (сервисы стрминига, новостные сайты, Facebook* и т.д.), то могли заметить один тренд, связанный с плеерами. Если прокрутить страницу вниз, плеер уменьшается в размере и прилипает к вьюпорту, а не скрывается.
Так пользователи могут смотреть видео и другой контент одновременно. В этом уроке я покажу вам, как воссоздать этот эффект. Без разглагольствований приступим к делу!
Примеры
Так как мы с вами находимся на этой странице, я подобрал парочку примеров из сети:
Entertainment Weekly прижимает видео к правому нижнему углу вьюпорта
CNN перемещает видео в правый верхний угол
Вставка видео с YouTube
Для начала давайте создадим страницу с Youtube видео. Самое важное – видео вставляется с параметром enablejsapi=1. Этот параметр позволит взаимодействовать с роликом через Youtube Iframe API.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="site-content"> <div class="container"> <header class="content-header"> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!</p> <!-- YouTube видео --> <figure class="content-media content-media--video" id="featured-media"> <iframe class="content-media__object" id="featured-video" src="//www.youtube.com/embed/SF4aHwxHtZ0?enablejsapi=1&rel=0&showinfo=0&controls=0" frameborder="0"></iframe> </figure> </header> <!-- Основной контент --> <div class="content-body"> </div> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="//www.youtube.com/iframe_api"></script> <script src="scripts/main.js"></script> |
Заметьте, внизу страницы мы подключили три JS файла: jQuery, скрипт с Youtube Iframe API и main.js для нашего кода.
Стили
Оформить страницу вы можете на свой вкус. Нас же интересуют стили YouTube видео. Во-первых, мы добавим стили, чтобы сделать YouTube видео адаптивным. Эти стили будут сохранять пропорции контейнера .content-media—video при перемещении ролика.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.content-media--video { background-color: #ddd; display: block; position: relative; padding: 0 0 56.25% 0; } .content-media--video iframe { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } |
Стили плавающего видео плеера
Следующие стили будут определять, как будет плавать наше видео. Будем использовать селектор .is-sticky-, который будет добавляться в плеер динамически с помощью JS. Этот селектор будет отвечать за передвижение видео на странице, уменьшение размера плеера, перемещение плеера в левую часть экрана, а также за настройку видео под пару вьюпортов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#featured-video { transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out; } /** Use .sticky */ #featured-video.is-sticky { position: fixed; top: 15px; left: auto; max-width: 280px; max-height: 158px; width: 280px; height: 158px; } @media screen and (min-width: 1120px) { #featured-video.is-sticky { transform: translateX(-80%); } } @media screen and (min-width: 1300px) { #featured-video.is-sticky { transform: translateX(-115%); } } |
Заметка: эти свойства (размер и позиция) нужно настраивать под свою аудиторию и сайт. Например, если контент на вашем сайте пишется справа налево, это может повлиять на удобное расположение плеера.
Мы загрузили страницу, перед нами наше видео с YouTube и какой-то контент.
Пишем JavaScript
Мы дошли до интересной части урока – JS! Сейчас в нашем файл main.js следующий код:
|
1 2 3 |
jQuery( function( $ ) { // Пишем код здесь. } ); |
Код выше – то же самое, что $(document).ready(). Код будет выполнен, как только загрузятся и распарсятся все элементы.
Далее задаем ряд переменных. Я добавил комментарии справа от каждой переменной с пояснениями.
|
1 2 3 4 5 6 7 |
var $window = $( window ); // 1. Объект Window. var $featuredMedia = $( "#featured-media" ); // 1. Контейнер видео. var $featuredVideo = $( "#featured-video" ); // 2. Видео с Youtube. var player; // 3. Объект Youtube плеера. var top = $featuredMedia.offset().top; // 4. Отступ видео сверху документа; var offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); //5. offset. |
Youtube Iframe API
Как уже было сказано, мы добавили JS файл с YouTube Iframe API. Это API после загрузки будет запускать функцию onYouTubeIframeAPIReady. Функция доступна на глобальном уровне. Так как наш скрипт вложен в jQuery( function( $ ) { });, то нам нужно обратиться к этой функции в объект window следующим образом:
|
1 2 3 4 5 6 7 |
window.onYouTubeIframeAPIReady = function() { player = new YT.Player( "featured-video", { events: { "onStateChange": onPlayerStateChange } } ); }; |
В функции видно, как мы выбираем ID-атрибут iframe и передаем функцию onPlayerStateChange. Эта функция запустится, как только YouTube плеер будет запущен, поставлен на паузу, или воспроизведение закончится.
Функция onPlayerStateChange передает объект Event, в котором хранятся полезные данные. В нашем примере мы с помощью объекта Event .data будем получать состояние видео.
Состояние видео, как видно ниже, представлено в виде чисел. 1 – видео воспроизводится, 2 – пауза, 3 – воспроизведение завершено. При изменении состояния мы будем добавлять и удалять соответствующие классы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** * Запускается, когда меняется состояние Youtube видео (воспроизведение, пауза и т.д.). * * @param {Object} event The Youtube Object Event. * @return {Void} */ function onPlayerStateChange( event ) { var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; if ( isPlay ) { $featuredVideo.removeClass( "is-paused" ); $featuredVideo.toggleClass( "is-playing" ); } if ( isPause ) { $featuredVideo.removeClass( "is-playing" ); $featuredVideo.toggleClass( "is-paused" ); } if ( isEnd ) { $featuredVideo.removeClass( "is-playing", "is-paused" ); } } |
Плавающее и прилипающее видео
Код ниже передвигает и фиксирует видео. Видео должно плавать только во время воспроизведения. Поэтому мы сперва будем проверять iframe на наличие класса is-playing и только потом будем добавлять класс is-sticky:
|
1 2 3 4 5 6 7 8 9 10 11 |
$window .on( "resize", function() { top = $featuredMedia.offset().top; offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); } ) .on( "scroll", function() { $featuredVideo.toggleClass( "is-sticky", $window.scrollTop() > offset && $featuredVideo.hasClass( "is-playing" ) ); } ); |
Проверьте, все должно заработать!
Конечное демо
Заключение
Мы закончили! Цель урока – дать вам фундамент, чтобы вы поняли, как фиксировать видео во время прокрутки страницы, как на медиа сайтах. Мы использовали jQuery для упрощения кода, чтобы он был короче и понятнее читателям.
В реальном проекте, скорее всего, придется что-то доделать тут, что-то там. Все зависит от сложности. Например, можно запускать функцию скролинга внутри функции Throttling для снижения количества вызовов. Также может потребоваться настройка положения и размера видео на макете сайта на мобильном устройстве и т.д.
Откройте демо, включите видео и прокрутите страницу!
Автор: Louie Rootfield
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Комментарии (3)