Создание минималистского плеера YouTube

31.01.2012

Марцин Дзиевульски

Оригинал: http://playground.mobily.pl/tutorials/creating-a-minimalist-youtube-player.html

Перевод: Влад Мержевич

Сегодня я собираюсь показать вам реально классный и минималистский плеер YouTube. Давайте начнём!

В начале, пожалуйста, создайте такую структуру папок и файлов:

Файлы и папки

Дизайн

В этом уроке я использую PSD-файл «Compact Music Player» созданный Орманом Кларком, который вы можете скачать здесь.

SWFObject (swfobject.js)

SWFObject является простым в использовании и основанным на стандартах методом для встраивания Flash на страницу, что гарантирует кроссбраузерность. Вы можете скачать его здесь.

TubePlayer (tubeplayer.js)

TubePlayer — плагин jQuery (создатель: Нирвана Тикку), который реализует YouTube Player API и позволяет вам создавать свой набор кнопок управления и компонентов для воспроизведения роликов с YouTube. Кроме jQuery ему также необходим SWFObject.

index.html

Как обычно, в этой части урока мы создадим код HTML. Он довольно простой.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Минималистский плеер YouTube</title>
  <link href="css/default.css" rel="stylesheet">
  <script src="js/jquery.js"></script>
  <script src="js/swfobject.js"></script>
  <script src="js/tubeplayer.js"></script>
  <script src="js/init.js"></script>
 </head>
 <body>
  <div class="player">
   <div id="video" class="video-8Eur8oIo3OU"></div>
  </div>
 </body>
</html>

Обратите внимание, что я ставлю идентификатор видео в атрибуте class. Мы получим это значение через JavaScript.

tubeplayer.js

В этом шаге мы собираемся модифицировать плагин TubePlayer. Я обнаружил, что нет никакого способа для скрытия панели управления YouTube с помощью TubePlayer. Пропустите этот шаг, если вы хотите показать панель управления.

Откройте tubeplayer.js и перейдите к строке 134:

"http://www.youtube.com/v/"+o.initialVideo+"?fs=1&enablejsapi=1&version=3&playerapiid="+ID,

и замените эту строку на:

"http://www.youtube.com/apiplayer?video_id="+o.initialVideo+"&fs=1&enablejsapi=1&autoplay=1&version=3&playerapiid="+ID,

init.js

$(function(){
  var v = $('#video').attr('class').split('video-')[1],
    // получаем идентификатор видео из атрибута class
    player = false,
    // плеер не запущен
    key = '',
    // обязательно требуется ваш ключ YouTube API!
    url = 'http://gdata.youtube.com/feeds/api/videos/'+v+'?callback=?&key='+key+'&format=5&alt=json';
    // запрос указанного видео, который мы пытаемся получить через AJAX с другого домена
    // будет предотвращён правилом ограничения домена.
    // чтобы побороть это, мы должны использовать в запрашиваемом адресе callback=?
    // это должно помочь нам преодолеть междоменный барьер
    $('#video-'+v).live('player', function(){
      // метод live() позволяет менять элементы ещё не добавленные в DOM
      var play = function(){
        $('.controls').find('.play').addClass('pause').removeClass('play');
      }, pause = function(){
        $('.controls').find('.pause').removeClass('pause').addClass('play');
      }
      // создаём функции воспроизведения/паузы простым изменением
      // класса кнопки управления
      $(this).tubeplayer({
        width: 500,
        // устанавливаем ширину плеера
        height: 350,
        // устанавливаем высоту плеера
        initialVideo: v,
        // запускаем TubePlayer с указанным видео
        allowFullScreen: false,
        onPlayerPlaying: function(){
          play();
        },
        onPlayerPaused: function(){
          pause();
        },
        onPlayerEnded: function(){
          pause();
        },
        onStop: function(){
          pause();
        }
      });
      if (!$(this).find('.stop').length)
        $(this).prepend($('<a />').attr('href', '#').addClass('stop').text('Остановить'));
        // добавить кнопку закрыть к всплывающему окну
      player = true;
      // плеер запущен
    });
    $.getJSON(url, function(response){
      var html = '',
      video = response.entry, // получаем объект JSON
      title = video.title.$t, // получаем заголовок
      category = video.media$group.media$category[0].label, // получаем название категории
      thumb = video.media$group.media$thumbnail[2].url, // получаем путь к миниатюре
      views = video.yt$statistics.viewCount, // получаем число просмотров
      favs = video.yt$statistics.favoriteCount, // получаем число понравившим
      duration = video.media$group.yt$duration.seconds; // получаем продолжительность видео
      html += '<div class="image">';
      html += '<img src="'+thumb+'" alt="" />';
      html += '<div class="controls"><a href="#" class="play">Воспроизвести</a></div>';
      html += '</div>';
      html += '<div class="entry">';
      html += '<p class="title">'+title+' ('+parseInt(duration/60)+':'+duration%60+')</p>';
      html += '<span>Просмотров: '+views+'</span>';
      html += '<span>Категория: '+category+'</span>';
      html += '<span class="favs">'+favs+'</span>';
      html += '</div>';
      $('#video').html(html).after(
        $('<div />').attr('id', 'video-'+v).addClass('ytube')
      );
      // создаём div, который содержит Flash из SWFObject
    });
    $('.controls').find('.play').live('click', function(){
      player == true ? $('#video-'+v).tubeplayer('play') : $('#video-'+v).fadeIn().trigger('player');
      // создаём плеер, если он не запущен
      return false;
    });
    $('.controls').find('.pause').live('click', function(){
      $('#video-'+v).tubeplayer('pause');
      return false;
    });
    $('#video-'+v).find('.stop').live('click', function(){
      $('#video-'+v).tubeplayer('stop').fadeOut();
      player = false;
      return false;
    });
});

default.css

.player {
  width:380px;
  position:relative;
}
     
.ytube {
  display:none;
  position:absolute;
  top:105px;
  left:-200px;
  width:500px;
  height:350px;
  padding:10px;
  background:url(../gfx/opac.png) repeat;
     
  /* CSS3 */
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  -moz-box-shadow:0 0 4px #000;
  -webkit-box-shadow:0 0 4px #000;
  box-shadow:0 0 4px #000;
}
     
.ytube .stop {
  display:block;
  position:absolute;
  top:4px;
  right:4px;
  width:16px;
  height:16px;
  text-indent:-9999px;
  outline:none;
  background:url(../gfx/stop.png) no-repeat;
}
     
#video {
  float:left;
  clear:both;
  width:380px;
}
     
#video .image {
  float:left;
  width:120px;
  height:90px;
  overflow:hidden;
  position:relative;
     
  /* обнуляем картинки */
  font-size:0;
  line-height:0;
     
  /* CSS3 */
  -moz-box-shadow:0 0 4px #000;
  -webkit-box-shadow:0 0 4px #000;
  box-shadow:0 0 4px #000;
}
     
#video .entry {
  float:right;
  width:245px;
  font-weight:bold;
}
     
.entry .title {
  /* обнуляем абзацы */
  padding:0;
  margin:0;
     
  margin-bottom:5px;
  font-weight:bold;
  font-size:13px;
  color:#efefef;
  text-shadow:1px 1px 0 #212121;
}
     
.entry span {
  margin-right:8px;
  font-size:10px;
  font-weight:normal;
  color:#999;
}
     
.entry .favs {
  display:block;
  background:url(../gfx/favs.png) no-repeat left center;
  padding-left:20px;
  margin-bottom:5px;
}
     
.image .controls {
  position:absolute;
  top:50%;
  left:50%;
  margin:-17px 0 0 -20px;
  padding:10px 15px;
  background:url(../gfx/opac.png) repeat;
     
  /* CSS3 */
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}
     
.controls a {
  float:left;
  display:block;
  text-indent:-9999px;
  outline:none;
  width:10px;
  height:15px;
  background-repeat:no-repeat;
}
     
.controls .play {
  background-image:url(../gfx/play.png);
}
     
.controls .pause {
  background-image:url(../gfx/pause.png);
}

Готово! Пожалуйста, покажите мне свои решения, если вы создали другой плеер YouTube с помощью этого руководства.

Посмотреть пример

Attachment	Size
youtube_player.zip (167.73 KB)	167.73 KB

YouTube