Войти Регистрация

YouTube API: плеер с помощью YouTube API, jQuery, CSS

YouTube API плеерВидео презентации это отличное дополнение к любому продукту. С помощью видео вы можете показать преимущества вашей продукции, при этом не затруднять пользователя чтением длинных параграфов. Но, при добавлении видео, вам необходимо вручную конвертировать его и найти (написать) некоторый 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 и построение контрольной панели плеера.

Плеер с помощью 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.

Прогресбар youtube плеера

Шаг 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


Дискуссия по теме     2 Комментария 
Добавить комментарий
Дмитрий 23.10.2013 в 19:25
ну а где демо всего этого дела?
Тарас 24.10.2013 в 13:39
Вот - http://demo.tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/youtube-player.html
Просмотров: 8555