Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Cоздание собственного плеера на JavaScript (Youtube Player)

Дата добавления: 30.07.2016 - 15:28
Добавил: Buger
Количество просмотров: 405
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
Cоздание собственного плеера на JavaScript (Youtube Player)
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 1
Наверняка многие фронтэнд разработчики да и в целом многие пользователи хоть раз интересовались работой и функционированием 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'ов, на которые мы привяжем наш плеер.



И самое главное — javascript.

Для создания и инициализации плеера через iframe api необходим div с идентификатором, к которому будет привязываться iframe с видео. В нашем случае это
Код
<div id="player"></div>

Управление плеером — JavaScript

Все равно, куда вы его положите, но главное ниже подключаемых библиотек (для простоты можно прямо в html-документе).


А теперь как это работает. Для начала создаем плеер — для этого нужна обязательная функция:
Код
//Инициализация плеера
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>

к которому при инициализации цепляется iframe. Далее height и width — размеры iframe, videoId: 'CyVuYAHiZb8' — идентификатор видео — это наш Рэй Чарльз. playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0} — это настройки плеера, сами говорят за себя -стоят нули, чтобы выключить элементы управления, которые мы делаем свои.

И events: {'onReady': onPlayerReady} — хук, цепляющий метод для обработки события готовности. Дальше как раз идет эта функция, в ней собраны методы для обработки событий и т.п.

Теперь что касается объекта player. Он создан и им можно управлять, вызывая методы, как в панели управления в html — кнопочки.


Кнопки play и pause
Код
<button id="play" onclick="player.playVideo();">Play</button>
— play
Код
<button id="pause" onclick="player.pauseVideo();">Pause</button>
— pause
Здесь все просто плей-пауза

Кнопки 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 здесь

Заключение
В целом в статье приводится один пример создания своего плеера, транслирующего Youtube видео на вашем сайте с использованием Javascript.

Источник: https://habrahabr.ru/post/306726/
Добавлять комментарии могут только зарегистрированные пользователи.