- → Программирование
- → JavaScript
- → Статьи
YouTube API: плеер с помощью YouTube API, jQuery, CSS
Видео презентации это отличное дополнение к любому продукту. С помощью видео вы можете показать преимущества вашей продукции, при этом не затруднять пользователя чтением длинных параграфов. Но, при добавлении видео, вам необходимо вручную конвертировать его и найти (написать) некоторый flash плеер, который будет отображать презентацию на сайте.
Другой вариант, загрузить видео на видеохостинг, например YouTube. Но вам придется повозиться с настройкой плеера под дизайн вашего сайта.
К счастью, YouTube предлагает решение этой проблемы – это их chromeless player, который позволяет вам разработать и настроить свой плеер. Благодаря YouTube API вы можете быстро и безопасно дополнять ваши страницы прекрасными видео. Также возможно свободно изменять размер плеера, к необходимому.
Суть идеи YouTube API плеера
Сегодня мы будем создавать jQuery плагин, который будет использовать YouTube chromeless player, и создадим наш собственный интерфейс с минимальным набором функционала, который позволит интегрировать плеер в дизайн нашего сайта. Из кнопок управления мы оставим только Play, Pause, Replay, а также кликабельный прогресбар.
Плагин использует YouTube gdata api для определения или изменения параметров видео, и получения информации о нем, такой как, название, описание, теги, скриншоты и т.д., которые вы можете использовать для расширения плагина.
Использование плагина для вставки видео предельно простое:
// Вставка видео в div #pleer
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
// также можно вставлять несколько видео
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
.youTubeEmbed('http://www.youtube.com/watch?v=AsdfFdwlzdAw');
Вы также можете указать ширину встраиваемого видео (высота будет рассчитана автоматически относительно пропорций видео), и отключать прогресбар:
$('#player').youTubeEmbed({
video : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
width : 600, // высота расчитается автоматически
progressBar : false // Скрыть прогресбар
});
Сейчас мы напишем плагин поэтапно, шаг за шагом.
Шаг 1 – HTML
Наш плагин зависит от плагина jQuery SWFObject, который встраивает SWF файл на страницу. Ниже, вы можете посмотреть совмещенную разметку, которая генерируется с помощью двух плагинов.
youtube-player.html
<div class="flashContainer" style="width: 640px; height: 360px;">
<object height="360" width="640" id="video_26ELpS3Wc4Q" type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
<param value="always" name="allowScriptAccess">
<param value="transparent" name="wmode">
<param value="video_id=26ELpS3Wc4Q&playerapiid=26ELpS3Wc4Q"
name="flashvars">
<param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
name="movie">
</object>
<div class="controlDiv play"></div>
<div class="progressBar">
<div class="elapsed"></div>
</div>
</div>
Блок .flashContainerDiv, динамически создается для каждого видео на странице. Он заполнен кодом, сгенерированным плагином SWFObject, блоком .controlDiv (который содержит кнопки play/pause) и прогрессбаром.
Как упоминалось выше, вставка плеера в контекст html кода, осуществляется с помощью плагина SWFObject. В зависимости от браузера, он может выводить object элемент, или нестандартный embed элемент для IE. Это снимает груз с наших плеч в плане кроссбраузерности кода и позволяет сконцентрироваться на таких вопросах, как подача запросов к YouTube API и построение контрольной панели плеера.
Шаг 2 – jQuery
Код плагина будет содержаться в файле youTubeEmbed-jquery-1.0.js. Перед его подключением, вам необходимо подключить последнюю версию jQuery библиотеки, а также плагин SWFObject, и наш файл скриптов script.js, который вставляет видео на страницу и позволяет настраивать вид плеера.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.swfobject.1-1-1.min.js"></script> <script src="youTubeEmbed/youTubeEmbed-jquery-1.0.js"></script> <script src="script.js"></script>
Перед тем, как мы начнем углубляться в код плагина, давайте посмотрим на простой ответ YouTube gdata api. Он дает нам много полезной информации о видео, включая продолжительность, контроль доступа и все виде дополнительных данных таких, как название, описание, теги, скриншоты и т.д.
Простой JSON ответ
{
"id": "u1zgFlCw8Aw",
"uploaded": "2008-03-05T01:22:17.000Z",
"updated": "2010-07-23T01:02:42.000Z",
"uploader": "GoogleDevelopers",
"category": "People",
"title": "The YouTube API: Upload, Player APIs and more!",
"description": "Listen to the YouTube APIs and Tools team talk about...",
"tags": ["youtube", "launch", "api", "engineering"],
"thumbnail": {
"sqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/default.jpg",
"hqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/hqdefault.jpg"
},
"player": {
"default": "http://www.youtube.com/watch?v=u1zgFlCw8Aw",
"mobile": "http://m.youtube.com/details?v=u1zgFlCw8Aw"
},
"content": {
"1": "rtsp://v4.cache5.c.youtube.com/CiILE..",
"5": "http://www.youtube.com/v/u1zgFlCw8Aw?f..",
"6": "rtsp://v3.cache4.c.youtube.com/CiILENy73.."
},
"duration": 259,
"location": "san bruno, ca",
"rating": 4.3,
"likeCount": "119",
"ratingCount": 144,
"viewCount": 251024,
"favoriteCount": 164,
"commentCount": 118,
"accessControl": {
"syndicate": "allowed",
"commentVote": "allowed",
"rate": "allowed",
"list": "allowed",
"comment": "allowed",
"embed": "allowed",
"videoRespond": "allowed"
}
}
Все поля ответа, это объекты, свойства который, доступны в виде data.fieldname. Вы можете расширять функциональность плагина самостоятельно, для возможности отображения названия, ссылки на видео в youtube, или вывода рейтинга видео. Одним словом, все что вам позволит фантазия.
Теперь, рассмотрим исключительно код плагина.
youTubeEmbed-jquery-1.0.js – Часть 1
(function($){
$.fn.youTubeEmbed = function(settings){
// Настройки могут быть URL строкой, или объектом
if(typeof settings == 'string'){
settings = {'video' : settings}
}
// Переменные по умолчанию
var def = {
width : 640,
progressBar : true
};
settings = $.extend(def,settings);
var elements = {
originalDIV : this, // this плагина
container : null, // блок контейнера
control : null, // контрольные кнопки плей, пауза
player : null, // флеш плеер
progress : null, // Прогресбар
elapsed : null // голубая заливка прогресбара
};
try{
settings.videoID = settings.video.match(/v=(\w+)/)[1];
// safeID это сокращенная версия videoid
settings.safeID = settings.videoID.replace(/[^a-z0-9]/ig,'');
} catch (e){
// Если url не корректный
return elements.originalDIV;
}
// Получение данных о видео из YouTube API
var youtubeAPI = 'http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc';
$.get(youtubeAPI,{'q':settings.videoID},function(response){
var data = response.data;
if(!data.totalItems || data.items[0].accessControl.embed!="allowed"){
// Если видео не найдено, вставка не возможна
return elements.originalDIV;
}
// data содержит API информацию о видео:
data = data.items[0];
settings.ratio = 3/4;
if(data.aspectRatio == "widescreen"){
settings.ratio = 9/16;
}
settings.height = Math.round(settings.width*settings.ratio);
Начинаем с определения нашего скрипта, как плагина, для этого мы добавляем объект $.fn в начале функции. Для простоты чтения и обработки кода, я вынес все элементы страницы, такие как блоки контрольной панели и прогресбара в отдельную структуру elements.
После извлечения id видео (уникальная последовательность из 11 символов, в коде после параметра ?v=), мы отправляем JSONP запрос к YouTube gdata API. В зависимости от доступности видеофайла, а также от разрешения на его вставку, мы продолжаем вычисляя пропорции видео. Высота видео вычисляется используя пропорцию и размер ширины.
youTubeEmbed-jquery-1.0.js – Часть 2
// создание контейнера внутри div блока, который будет содержать вставочный код объекта видео
elements.container = $('<div>',{className:'flashContainer',css:{
width : settings.width,
height : settings.height
}}).appendTo(elements.originalDIV);
// Вставка YouTube chromeless player
// и загрузка видео внутрь плеера
elements.container.flash({
swf : 'http://www.youtube.com/apiplayer?enablejsapi=1&version=3',
id : 'video_'+settings.safeID,
height : settings.height,
width : settings.width,
allowScriptAccess:'always',
wmode : 'transparent',
flashvars : {
"video_id" : settings.videoID,
"playerapiid" : settings.safeID
}
});
elements.player = elements.container.flash().get(0);
// Создание блока контрольных элементов
elements.control = $('<div>',{className:'controlDiv play'})
.appendTo(elements.container);
// Если пользователь захотел увидеть прогресбар
if(settings.progressBar){
elements.progress = $('<div>',{className:'progressBar'})
.appendTo(elements.container);
elements.elapsed = $('<div>',{className:'elapsed'})
.appendTo(elements.progress);
elements.progress.click(function(e){
// При нажатии на прогресбар, прокручиваем видео
var ratio = (e.pageX-elements.progress.offset().left)/elements.progress.outerWidth();
elements.elapsed.width(ratio*100+'%');
elements.player.seekTo(Math.round(data.duration*ratio), true);
return false;
});
}
Во второй части кода, мы используем плагин SWFObject для генерации кода вставки плеера youtube chromeless. Следует заметить, что id видео передается как переменная flash и плеер может загружать видео напрямую. Переменная safeID ( это JavaScript версия переменной videoid ), создается из id, генерируется. С помощью этого, далее мы сможем иметь доступ к DOM элементу с помощью document.getElementById(‘video_’+settings.safeID), и получать доступ к функциям, которые контролируют работу youtube плеера (play, pauseи т.д.).
youTubeEmbed-jquery-1.0.js – Часть 3
var initialized = false;
// Создание глобальной калбек функции
// (необходимо для связи плеера с YouTube API):
window['eventListener_'+settings.safeID] = function(status){
var interval;
if(status==-1) // видео загружено
{
if(!initialized)
{
// Ожидание клика:
elements.control.click(function(){
if(!elements.container.hasClass('playing')){
// Если видео не запущено, запускаем
elements.control.removeClass('play replay').addClass('pause');
elements.container.addClass('playing');
elements.player.playVideo();
if(settings.progressBar){
interval = window.setInterval(function(){
elements.elapsed.width(
((elements.player.getCurrentTime()/data.duration)*100)+'%'
);
},1000);
}
} else {
// Если видео проигрывается - пауза
elements.control.removeClass('pause').addClass('play');
elements.container.removeClass('playing');
elements.player.pauseVideo();
if(settings.progressBar){
window.clearInterval(interval);
}
}
});
initialized = true;
}
else{
// Если пользователь кликнет по
// YouTube логотипу, перенаправим его на сайт youtube.com
if(elements.container.hasClass('playing'))
{
elements.control.click();
}
}
}
Далее, для доступа к контрольным элементам плеера, мы должны знать, когда и какие события запущены (проигрывание, стоп, пауза и т.д.). Это означает, что нам необходимо передать callback функцию, которая будет постоянно работать, сообщая какие события происходят.
К сожалению, flash может запускать функции, только определенные в глобальных параметрах и не может видеть, какие функции написаны внутри плагина. Хотя, с помощью создания функций с уникальными именами (с помощью safeID) и естественно добавляя их в окно объекта мы можем реализовать эту связь с flash. Если мы не будем пользоваться этой хитростью, плагин не будет работать.
youTubeEmbed-jquery-1.0.js – Часть 4
if(status==0){ // Видео закончилось
elements.control.removeClass('pause').addClass('replay');
elements.container.removeClass('playing');
}
}
// Глобальная функция вызывается при загрузке плеера
if(!window.onYouTubePlayerReady)
{
window.onYouTubePlayerReady = function(playerID){
document.getElementById('video_'+playerID).addEventListener('onStateChange','eventListener_'+playerID);
}
}
},'jsonp');
return elements.originalDIV;
}
})(jQuery);
Функцию, которая распознает события, мы создали в предыдущей секции кода, теперь прикрепим ее к плееру с помощью метода addEventListener. Она вызывается постоянно в случае существования stateChange (начало проигрыша, пауза, конец и т.д.). В функцию передается цифровой код, которые соответствует событию.
Теперь посмотрим, как использовать наш плагин.
script.js
$(document).ready(function(){
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
/*
//Как вариант можно передать настройки объектом
$('#player').youTubeEmbed({
video : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
width : 600, // высота высчитывается автоматически
progressBar : false // Скрыть прогрессбар
});
*/
});
Вам просто необходимо вызвать функцию youTubeEmbed() и передать конфигурационные параметры. Если передается строка, это должна быть ссылка на youtube видео. Если вы передаете объект, убедитесь, что свойство video содержит корректный URL.
Шаг 3 – CSS
На конец, мы добавим несколько CSS стилей к плееру. Они немножко изменят дизайн контрольных элементов плеера и определят их расположение в окне плеера.
youTubeEmbed-jquery-1.0.css
.flashContainer{
/* центрируем контрольную панель */
position:relative;
overflow:hidden;
}
.progressBar{
display:none;
position:absolute;
width:auto;
height:8px;
left:20px;
right:105px;
bottom:20px;
background-color:#141414;
overflow:hidden;
cursor:pointer;
/* A light CSS3 bottom highlight */
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
.progressBar .elapsed{
position:absolute;
width:0;
height:100%;
background-color:#1fa2f6;
border-right:1px solid #49AFF0;
}
.controlDiv{
/* Centering the control div */
position:absolute;
width:120px;
height:120px;
cursor:pointer;
top:50%;
left:50%;
margin:-60px 0 0 -60px;
}
.controlDiv.play{
background:url('img/play.png') no-repeat center center;
}
.controlDiv.replay{
background:url('img/replay.png') no-repeat center center;
}
.controlDiv.pause{
background:url('img/pause.png') no-repeat -99999px;
}
.flashContainer:hover .controlDiv.pause{
background-position:center center;
}
/* Показываем только прогрессбар при воспроизведении */
.flashContainer.playing:hover .progressBar{
display:block;
}
Для изменения вида плеера, вам необходимо изменить значения цветов. Также вы можете создать собственные pngфайлы (play/pause). На мой взгляд, это намного проще, нежели изменять вид стандартного плеера youtube.
На этом создание простого YouTube плеера завершено!
Вам понравилась эта статья? Оставьте свои мысли в комментариях ниже!
Источник материала ...
Дальше: Загрузка картинок в TinyMCE, с помощью PHP
Development — Taras Moroz