В одном из предыдущих уроков мы разобрались, как создавать поиск по YouTube на своем сайте. В данном уроке мы сделаем минимальный проигрыватель роликов YouTube на своем сайте (чтобы не переходить на сайт YouTube).
Для начала создадим структуру каталогов и файлов, как показано на рисунке:
Структура каталогов
Дизайн
Для создания изображений для данного урока использовался PSD файл 'Compact Music Player' (автор Orman Clark).
SWFObject (swfobject.js)
SWFObject является простым методом для встраивания Flash в контент. Он обеспечивает кросс-браузерную поддержку. Скачать его можно здесь.
TubePlayer (tubeplayer.js)
TubePlayer является плагином jQuery (автор Nirvana Tikku) , который использует YouTube Player API и дает возможность создавать собственные элементы управления и компоненты видео с сайта YouTube. Для своей работы он использует SWFObject.
index.html
Создадим разметку HTML. Она очень проста.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Делаем минимальный проигрыватель для видео с YouTube | Демонстрация для сайта RUSELLER.COM</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/tubeplayer.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="player">
<div id="video" class="video-bBDE-mFIC9M"></div>
</div>
</div>
</body>
</html>
Обратите внимание, что ID видео ролика помещен в имя класса. Мы будем вытаскивать его в JavaScript коде.
tubeplayer.js
Теперь мы готовы модифицировать плагин TubePlayer. Скрыть панель управления YouTube с помощью плагина TubePlayer нельзя. Поэтому, если вам нужно выводить панель управления YouTube? то данный шаг следует пропустить.
Открываем файл 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],
// Получаем ID видео из атрибута класса
player = false,
// Плейер не работает
key = '',
// Ваш ключ YouTube API - ТРЕБУЕТСЯ ОБЯЗАТЕЛЬНО!
url = 'http://gdata.youtube.com/feeds/api/videos/'+v+'?callback=?&key='+key+'&format=5&alt=json';
// Запрашиваем указанное видео
// Мы формируем запрос AJAX к другому домену, что ограничено правилами использования запросов.
// Для преодоления барьера используется JSONP callback=? к адресу url, который нужен
$('#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('Stop'));
// Добавляем только кнопку закрытия
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: '+views+'</span>';
html += '<span>Category: '+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);
}
Готово!