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

Каталог файлов / Все для uCoz / Скрипты для uCoz
Создание минималистского плеера YouTube	Скачать \| Размер: 44.6 Kb \| Добавлено: 03 Фев 2012 \| Источник:

Demo

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

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

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

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

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

Code

<!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:

Code

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

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

Code

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

init.js

Code

$(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

Code

.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);
}

Готово!

Автор поста

1 комментарий

Порядок вывода комментариев:

Спам

#1 Sheroz 9:38 AM, 17 Фев 2012

Как поставит и откуда начать установить?

Войти

Авторизуйтесь, чтоб иметь возможность комментировать материал.

Up!

© 2011 - 2024 in-uGroup · Правила сайта · Обратная связь · Google+ · Youtube · Twitter · Soundcloud
Авторские права и идея создания сайта Bilbao111
Хостинг от uCoz