На сегодняшний день YouTube стал стандартом, когда речь идёт о выводе видео-контента. Иногда в рамках веб-приложения или лендинга требуется возможность контроля за работой плеера. Именно поэтому тема нашего сегодняшнего урока YouTube JavaScript Player API.

 

Инициализация плеера

Для начала нам нужно создать блок вместо которого будет подгружаться плеер, а так же необходимо разместить подключение YouTube API.

<div id="video-placeholder"></div>
<script src="https://www.youtube.com/iframe_api"></script>

После того как API будет полностью загружено произойдёт вызов метода onYouTubeIframeAPIReady(), который должен быть нами определён. Внутри мы должны создать объект YouTube плеера. Первый аргумент: идентификатор HTML элемента, где будет размещаться плеер (в нашем случае video-placeholder). Второй: объект со следующими полями:

• Ширина и высота плеера. Данные значения можно сбить через CSS, присвоив значения к #video-placeholder
• Идентификатор видео-ролика, который должен быть подгружен в плеер. Данное значение можно достать из любой YouTube ссылки после параметра ?v= (к примеру, youtube.com/watch?v=WwoKkq685Hk);
• В объекте playerVars можно передать целый набор параметров. Цвет нашего плеера будет светлым, а так же настроим плейлист, добавив ещё несколько видео через запятую. Все возможные значения можно найти тут;
• В объекте events следует указать все функции “прослушки” событий, которые нам нужны. В данные методы API передаёт объект event. Подробнее об этом можно найти тут.

Полный код будет выглядеть так:

function onYouTubeIframeAPIReady() {
 player = new YT.Player('video-placeholder', {
 width: 600,
 height: 400,
 videoId: 'Xa0Q0J5tOP0',
 playerVars: {
 color: 'white',
 playlist: 'taJ60kskkns,FG0fTKAqZ5g'
 },
 events: {
 onReady: initialize
 }
 });
}

После того как плеер будет полностью загружен произойдёт вызов метода initialize(). Он запускает функционал, который будет отрабатывать каждую секунду.

function initialize(){
// Обновляем элементы управления и загружаем
 updateTimerDisplay();
 updateProgressBar();
// Сброс старого интервала
 clearInterval(time_update_interval);
// Запускаем обновление таймера и дорожки проигрывания
 // каждую секунду.
 time_update_interval = setInterval(function () {
 updateTimerDisplay();
 updateProgressBar();
 }, 1000)
}

Отображение текущего времени и длительности видео

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

// Данная функция сработает при вызове initialize()
function updateTimerDisplay(){
 // Обновление текущего времени.
 $('#current-time').text(formatTime( player.getCurrentTime() ));
 $('#duration').text(formatTime( player.getDuration() ));
}
function formatTime(time){
 time = Math.round(time);
var minutes = Math.floor(time / 60),
 seconds = time - minutes * 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ":" + seconds;
}

Данные методы вызываются от объекта player, который мы создали чуть ранее. Для получения текущего времени вызываем метод getCurrentTime(); Общую длительность видео можно узнать, вызвавgetDuration(). Обе функции вернут результат в секундах, которые мы переводим в нужный формат и выводим в DOM.

Блок прогресса проигрывания

Для проигрывания видео, начиная с какого-то времени следует вызвать метод player.seekTo(sec).

Для демонстрации работы данного метода мы создадим нашу собственную область проигрывания видео-ролика: поле типа range. При клике по нему, получим процент от нахождения ползунка относительно начала дорожки. Затем мы используем полученное значение для определения секунды, на которую нужно передвинуть воспроизведение.

$('#progress-bar').on('mouseup touchend', function (e) {
// Вычисление нового времени.
 // новое время в секундах = общая время видео * ( значение поля / 100 )
 var newTime = player.getDuration() * (e.target.value / 100);
// Воспроизведение видео с нового времени.
 player.seekTo(newTime);
});

Так же мы хотим чтобы ползунок двигался в то время как проигрывается видео. Возвращаемся в методinitialize() и переходим в updateProgressBar().

// Данная функция будет вызвана в initialize()
function updateProgressBar(){
 // Update the value of our progress bar accordingly.
 $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

Воспроизведение/остановка видео

Тут ничего сверхъестественного. Клепаем две кнопки, и отслеживаем клики по ним.

$('#play').on('click', function () {
 player.playVideo();
});
$('#pause').on('click', function () {
 player.pauseVideo();
});

Управление звуком

Для включения/отключения звука можем создать специальную кнопку.

$('#mute-toggle').on('click', function() {
 var mute_toggle = $(this);
if(player.isMuted()){
 player.unMute();
 mute_toggle.text('volume_up');
 }
 else{
 player.mute();
 mute_toggle.text('volume_off');
 }
});

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

$('#volume-input').on('change', function () {
 player.setVolume($(this).val());
});

Другие настройки плеера

Скорость воспроизведения

В player.setPlaybackRate() можно передать одно из следующих значений:

• 0.25
• 0.5
• 1
• 1.5
• 2

Создаём элемент <select> с дочерними элементами <option>. При смене активного элемента, берём его значение и передаём в соответствующий метод API.

$('#speed').on('change', function () {
 player.setPlaybackRate($(this).val());
});

Выбор качества видео

Точно так же мы можем контролировать качество воспроизводимого виде-ролика. В методsetPlaybackQuality() можно передать одно из следующих значений:

• highres
• hd1080
• hd720
• large
• medium
• small

Просьба заметить, что качество видео зависит не только от переданного значения, но и так же от скорости интернета.

$('#quality').on('change', function () {
 player.setPlaybackQuality($(this).val());
});

Списки воспроизведения

Для перехода к следующему/предыдущему видео-ролику из вашего списка достаточно обратиться к соответствующим методам API.

$('#next').on('click', function () {
 player.nextVideo()
});

$('#prev').on('click', function () {
player.previousVideo()
});

Если вы хотите включить какое-то конкретное видео, то достаточно передать его индекс в методplayer.playVideoAt(index). Индексация начинается с 0.

Динамическая очередь из видео-роликов

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

$('.thumbnail').on('click', function () {
var url = $(this).attr('data-video-id');
player.cueVideoById(url);
});

Итог

Наш урок подошёл к концу! Надеемся, что данная информация будет для вас полезна. Вдобавок можете посетить следующие ресурсы для более глубокого изучения данной темы:

• Документация YouTube Iframe Player API – тут.
• Параметры YouTube Player – тут.
• Настройка плеера под себя – тут.