Вступление
Наверняка многие фронтэнд разработчики да и в целом многие пользователи хоть раз интересовались работой и функционированием Youtube Player. В этой статье я расскажу, как он работает, и как сделать свой плеер для воспроизведения Youtube видео со своим интерфейсом. Так же приведу примеры для понимания, как это работает.
Для обычного пользователя снаружи ссылка на видео может выглядеть таким образом: www.youtube.com/watch?v={video_id} . Или, например, таким: youtu.be/{video_id} — где video_id — идентификатор видео в базе Youtube (он уникальный для каждого видео и самую важную информацию, по которой тянется видео, формируются ссылки и т.д). Для примера возьму, чтобы никого не обидеть (и не пиарить не дай бог) video_id=CyVuYAHiZb8 — видео ролик с Ray Charles — Hit the Road.
Как многие знают, для вставки собственно видео на свой сайт существует простая возможность «скопировать HTML код» при нажатии на видео правой кнопкой в Youtube и получить в буфере iframe:
<iframe width="640" height="360" src="https://www.youtube.com/embed/CyVuYAHiZb8" frameborder="0" allowfullscreen></iframe>
Таким iframe как раз и можно управлять на своем сайте. Далее расскажу, как это сделать на примере формирования своих элементов управления и обработчиков событий на Javascript + Jquery.
Страница с плеером — верстка
Сначала создаем простую html-страничку, в которой будут несколько div-block'ов, на которые мы привяжем наш плеер.
HTML-код страницы
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> <!-- jQuery -->
<script src="https://www.youtube.com/iframe_api"></script> <!-- Здесь цепляем кода iframe_api-->
<link rel='stylesheet' id='fortunato-style-css' href='http://your.styles.css' type='text/css' media='' /> <!-- стили (в отдельном куске css кода)-->
</head>
<body>
<div class="panel">
<button id="back" onclick="player.previousVideo();">Back</button>
<button id="play" onclick="player.playVideo();">Play</button>
<button id="pause" onclick="player.pauseVideo();">Pause</button>
<button id="next" onclick="player.nextVideo();">Next</button>
<div id="time">00:00</div>
<div id="line" onclick="progress (event);">
<div class="viewed"></div>
<div id="fader" onclick="alert('fader');"></div>
</div>
<button id="volume" onclick="editVolume ();">Громкость</button>
<div id="quality">Auto</div>
<button id="full" onclick="playFullscreen ();">FullScreen</button>
</div>
<div>
<button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button>
<button id="qual" onclick="editQuality ();">Сменить качество на 480</button>
</div>
</body>
</html>
Стили кнопок и плеера
body {
margin: 0;
}
.panel {
width: 850px;
height: 40px;
background: grey;
margin-top: -5px;
border: 1px solid #aaa;
}
#play, #back, #next, #pause{
float: left;
width: 50px;
height: 40px;
}
#time{
float: left;
width: 50px;
height: 40px;
color: #fff;
padding-top: 10px;
margin-left: 10px;
}
#line{
margin-top: 15px;
height: 4px;
width: 350px;
background: #fff;
float: left;
margin-right: 15px;
}
#volume {
float: left;
width: 80px;
height: 40px;
}
#quality{
float: left;
width: 50px;
height: 40px;
color: #fff;
padding-top: 10px;
margin-left: 10px;
}
#full {
float: left;
width: 75px;
height: 40px;
}
#fader {
background: black;
border-radius: 5px;
width: 10px;
height: 10px;
position: relative;
z-index: 4;
bottom: 3px;
}
#playlist {
margin-top: 20px;
}
.viewed {
position: absolute;
background: red;
height: 4px;
}
И самое главное — javascript.
Для создания и инициализации плеера через iframe api необходим div с идентификатором, к которому будет привязываться iframe с видео. В нашем случае это
<div id="player"></div>Управление плеером — JavaScript
Все равно, куда вы его положите, но главное ниже подключаемых библиотек (для простоты можно прямо в html-документе).
Весь Javascript-код - функции
//Инициализация плеера
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '500',
playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0},
width: '850',
videoId: 'CyVuYAHiZb8',
events: {
'onReady': onPlayerReady
}
});
}
// Обработчик готовность
function onPlayerReady(event) {
var player = event.target;
iframe = document.getElementById('player');
setupListener();
updateTimerDisplay();
updateProgressBar();
time_update_interval = setInterval(function () {
updateTimerDisplay();
updateProgressBar();
}, 1000);
}
/*Слушать события*/
function setupListener (){
document.getElementById('full').addEventListener('click', playFullscreen);
}
/*Включение фуллскрина*/
function playFullscreen (){
player.playVideo();//won't work on mobile
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(iframe)();
}
}
/*Загрузить плейлист*/
function loadPlaylistVideoIds(); {
player.loadPlaylist({
'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'],
'listType': 'playlist',
'index': 0,
'startSeconds': 0,
'suggestedQuality': 'small'
});
}
/*Громкость*/
function editVolume () {
if (player.getVolume() == 0) {
player.setVolume('100');
} else {
player.setVolume('0');
}
}
/*Качество*/
function editQuality () {
player.setPlaybackQuality('medium');
document.getElementById('quality').innerHTML = '480';
}
// Обновляем время на панельке - счетчик
function updateTimerDisplay(){
document.getElementById('time').innerHTML = formatTime(player.getCurrentTime());
}
/*Формат времени*/
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;
}
// Обновляем прогресс
function updateProgressBar(){
var line_width = jQuery('#line').width();
var persent = (player.getCurrentTime() / player.getDuration());
jQuery('.viewed').css('width', persent * line_width);
per = persent * 100;
jQuery('#fader').css('left', per+'%');
}
/*Линия прогресса*/
function progress (event) {
var line_width = jQuery('#line').width();
// положение элемента
var pos = jQuery('#line').offset();
var elem_left = pos.left;
// положение курсора внутри элемента
var Xinner = event.pageX - elem_left;
var newTime = player.getDuration() * (Xinner / line_width);
// Skip video to new time.
player.seekTo(newTime);
}
А теперь как это работает. Для начала создаем плеер — для этого нужна обязательная функция:
//Инициализация плеера
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '500',
playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0},
width: '850',
videoId: 'CyVuYAHiZb8',
events: {
'onReady': onPlayerReady
}
});
}
Она вызывается сама по видимому сразу, а внутри нее создается объект YT.Player с параметрами. Первый 'player' — идентификатор
<div id="player"></div>И events: {'onReady': onPlayerReady} — хук, цепляющий метод для обработки события готовности. Дальше как раз идет эта функция, в ней собраны методы для обработки событий и т.п.
Теперь что касается объекта player. Он создан и им можно управлять, вызывая методы, как в панели управления в html — кнопочки.
HTML-код панельки плеера
<div class="panel">
<button id="back" onclick="player.previousVideo();">Back</button>
<button id="play" onclick="player.playVideo();">Play</button>
<button id="pause" onclick="player.pauseVideo();">Pause</button>
<button id="next" onclick="player.nextVideo();">Next</button>
<div id="time">00:00</div>
<div id="line" onclick="progress (event);">
<div class="viewed"></div>
<div id="fader" ></div>
</div>
<button id="volume" onclick="editVolume ();">Громкость</button>
<div id="quality">Auto</div>
<button id="full" onclick="playFullscreen ();">FullScreen</button>
</div>
<div>
<button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button>
<button id="qual" onclick="editQuality ();">Сменить качество на 480</button>
</div>
Кнопки play и pause
<button id="play" onclick="player.playVideo();">Play</button>
<button id="pause" onclick="player.pauseVideo();">Pause</button>
Здесь все просто плей-пауза
Кнопки back и next
<button id="back" onclick="player.previousVideo();">Back</button>
<button id="next" onclick="player.nextVideo();">Next</button>
Эти кнопки нужны для переключения видео в плейлисте.
Для создания плейлиста есть кнопка
<button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button>
Эта функция вызывает метод player.loadPlaylist ({....})
function loadPlaylistVideoIds(); {
player.loadPlaylist({
'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'],
'listType': 'playlist',
'index': 0,
'startSeconds': 0,
'suggestedQuality': 'small'
});
}
с параметрам playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'] — список видео в плейлисте. 'listType': 'playlist' — тип, 'index': 0 — индекс видео, с которого начать, остальные параметры очевидны. Так загружаются плейлисты. Также плейлист можно инициализировать прямо в начале, тогда нужно в параметрах объекта YT.Player прописать playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0, playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'] },
Также реализованы кнопки управления громкостью
<button id="volume" onclick="editVolume ();">Громкость</button>
/*Громкость*/
function editVolume () {
if (player.getVolume() == 0) {
player.setVolume('100');
} else {
player.setVolume('0');
}
}
А также качество
<button id="qual" onclick="editQuality ();">Сменить качество на 480</button>
/*Качество*/
function editQuality () {
player.setPlaybackQuality('medium');
document.getElementById('quality').innerHTML = '480';
}
И фуллскрин
<button id="full" onclick="playFullscreen ();">FullScreen</button>
function playFullscreen (){
player.playVideo();
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(iframe)();
}
}
Здесь кратко описаны функции для работоспособности панельки. В итоге — Кнопки Play, Pause, есть кнопка загрузки плейлиста из 3-х видео, Next и Back для плейлиста, фейдер и линия прогрузки, обновляющееся время, кнопки, демонстрирующие работу громкости, качества и фуллскрин — все это начальные сведения для разработки собственного плеера, взаимодействующего с Youtube Iframe.
Демо вариант доступен Вот тут
При написании статьи использовался мануал от Youtube в котором можно найти расширенное описание работы с Youtube iframe API здесь
Ресурсы, реализующие такой плеер
- Про функционирование кнопки для fullscreen я нашел пример на codepen
- Демо вариант от ютуба можно посмотреть у них демо Youtube — но тут не совсем то.
- Ещё на просторах интернета нашел сайт Valera.tv с реализацией такого плеера со своим забавным дизайном.
- Кстати, аналогичный плеер был сделан в ВКонтакте, но почему то они от него отказались, и просто вставляют стандартный iframe c ютубовскими кнопками.
- Также для справки аналогичный плеер и реализацию через Youtube iframe API для плеера делает Uppod — но он частично платный и про него кучу раз писали.
Заключение
В целом в статье приводится один пример создания своего плеера, транслирующего Youtube видео на вашем сайте с использованием Javascript.
