Эта страница переведена с помощью Cloud Translation API.

TubeLoc: библиотека YouTube Player AS3

Эта статья была написана и отправлена внешним разработчиком. Команда YouTube API благодарит Бена Лонгорию за его время и опыт.

Бен Лонгория, Университет Висконсина – Мэдисон, Академическая технология
февраль 2009 г.

Введение
Суть земли
Использование Movie.as
Использование MovieSprite.as
Куда я могу позвонить, что я получу?
Заключение

Введение

Рис. 1. Демонстрация проигрывателя TubeLoc Chromeless

Ух ты. Примерно через месяц, на момент написания этой статьи, API YouTube Player исполнится год. Сколько лет интернету? На API было построено несколько замечательных проектов. Вам нужно только следить за блогом YouTube Developer API , чтобы увидеть, что есть множество людей, которые добились больших успехов с его помощью.

Текущий набор приложений проигрывателя API YouTube написан на ActionScript 2, и хотя этот язык по-прежнему остается отличным языком для использования, многие люди сейчас используют ActionScript 3 и/или Flex . Проблема в том, что вам придется пройти через несколько шагов, чтобы заставить приложения ActionScript 2 обмениваться данными с приложениями ActionScript 3. "Но подождите... кажется, я уже слышал это раньше - разве для этого уже не существует чего-то?" Вы можете спросить.

Многие люди уже поняли, как это сделать, и любезно поделились своей мудростью на форумах разработчиков YouTube API . Также были проекты AS3 Chromeless Wrapper и Flex Embedded Player , упрощающие использование разработчиками.

Мне нужен был легкий и простой способ повторного использования функций Player API исключительно в ActionScript 3 или MXML. Класс без Flex для тех проектов, у которых аллергия на Flex, и простой в использовании компонент Flex для тех проектов, которые любят Flex. TubeLoc удовлетворяет обоим требованиям

TubeLoc (мэшап YouTube и LocalConnection) — это библиотека ActionScript 3, которая служит адаптером для API проигрывателя YouTube ActionScript 2. Вы можете легко добавить функции видео YouTube в свои приложения ActionScript 3 или Flex с полноэкранным или бесхромным проигрывателем YouTube. TubeLoc использует класс LocalConnection для связи с SWF-посредником ActionScript 2. SWF ActionScript 2 взаимодействует с официальным проигрывателем YouTube API. Итак, как мы используем эту вещь?

Суть земли

Во-первых, вы должны загрузить текущий выпуск библиотеки из проекта Google Code . После распаковки zip-архива релиза вы найдете внутри каталог as3 . В нем находится каталог src , который включает несколько примеров классов. Не стесняйтесь использовать их в качестве отправной точки. В папке com/enefekt/tubeloc в каталоге src есть два файла. Movie.as — это то, что вы можете использовать в своих проектах Flex, а MovieSprite.as — это то, что вы можете использовать в своих проектах ActionScript 3. В com/enefekt/tubeloc/event есть различные классы событий для различных уведомлений, которые могут быть отправлены с плеера.

Прежде чем приступать к примерам из этого руководства, убедитесь, что каталог src в каталоге as3 указан в пути вашего класса. Этот процесс зависит от того, что вы используете для разработки, поэтому ознакомьтесь с документацией по вашей среде разработки.

После компиляции демоверсии или приложения вам понадобится SWF-файл ActionScript 2, который взаимодействует с API проигрывателя YouTube. Вы можете найти этот SWF в архиве релиза здесь: as3/lib/as2_tubeloc.swf . Просто убедитесь, что он находится рядом с HTML-файлом, в который встроено ваше SWF-приложение, например:

my_app/
  my_app.html
  as2_tubeloc.swf
  my_app.swf

Примечание. Путь к этому SWF-файлу можно изменить с помощью свойства playerWrapperUrl в библиотеке.

Использование Movie.as

Давайте посмотрим, как использовать Flex-версию TubeLoc. Сначала мы рассмотрим полноэкранный проигрыватель (со всеми элементами управления), а затем хромированный проигрыватель BYOC. Вот как вы используете полноэкранный проигрыватель в MXML:

<tubeloc:Movie id="tubelocMovie" width="320" height="240" 
		videoId="GJ1sZBTnbuE" />

Я знаю, я знаю, больно, да? Нисколько! Итак, давайте сойдем с ума и сделаем бесхромный:

<tubeloc:Movie id="tubelocMovie" width="320" height="240" 
		videoId="GJ1sZBTnbuE" chromeless="true" />

Мы добавляем к боли еще один атрибут, вот и все. Итак, вот как будет выглядеть весь файл MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
		xmlns:tubeloc="com.enefekt.tubeloc.*">
   
	<!-- TubeLoc Movie Component -->
	<tubeloc:Movie id="tubelocMovie" width="320" height="240" 
			videoId="GJ1sZBTnbuE" chromeless="true" />
	
</mx:Application>

Примечание. В элементе mx:Application мы добавляем пространство имен tubeloc с пакетом для компонента Movie. После этого мы можем использовать компонент, как показано. Позже мы рассмотрим, что доступно для установки и вызова этого компонента.

Использование MovieSprite.as

Теперь давайте посмотрим, как использовать версию TubeLoc для ActionScript 3. Эта версия не требует классов из среды Flex и использует только собственные классы Flash Player. Сначала мы рассмотрим, как сделать полнохромный проигрыватель, а затем проигрыватель без хрома. Вот полный пример:

package {
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	import com.enefekt.tubeloc.MovieSprite;
	import com.enefekt.tubeloc.event.*;

	[SWF(backgroundColor="#FFFFFF")]
	public class MainChromed extends Sprite {
		private var youtubeMovie:MovieSprite;

		public function MainChromed() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			youtubeMovie = new MovieSprite("7tTNOX8jfno");
			youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
			youtubeMovie.x = 10;
			youtubeMovie.y = 10;
			addChild(youtubeMovie);
		}

		private function onPlayerReady(event_p:PlayerReadyEvent):void {
			youtubeMovie.width = 640;
			youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
		}
	}
}

Сначала мы импортируем необходимые классы TubeLoc. Затем в конструкторе мы создаем экземпляр класса MovieSprite и передаем идентификатор нашего видео в конструктор MovieSprite. Затем мы добавляем прослушиватель событий для PlayerReadyEvent . В обработчике события onPlayerReady задаем размер ролика. Примечание. Поскольку мы используем полноэкранный проигрыватель, мы используем статическое свойство CHROME_HEIGHT класса MovieSprite . Это помогает нам определить размер фильма с учетом высоты хрома.

Хорошо, а как насчет бесхромного плеера?

package {
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
		
	import com.enefekt.tubeloc.MovieSprite;
	import com.enefekt.tubeloc.event.*;
	
	[SWF(backgroundColor="#FFFFFF")]
	public class MainChromeless extends Sprite {
		private var youtubeMovie:MovieSprite;
		
		public function MainChromeless() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			youtubeMovie = new MovieSprite(null, true);
			youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
			youtubeMovie.x = 10;
			youtubeMovie.y = 10;
			addChild(youtubeMovie);
		}
		
		private function onPlayerReady(event_p:PlayerReadyEvent):void {
			youtubeMovie.width = 640;
			youtubeMovie.height = 480;
			youtubeMovie.loadVideoById("7tTNOX8jfno");
		}
	}
}

Так что же изменилось? В конструкторе мы передаем null для идентификатора видео, а второй параметр true сообщает классу MovieSprite , что мы собираемся без хрома. Вы также заметите разницу в обработчике события onPlayerReady . Здесь мы загружаем наше видео по идентификатору, используя метод loadVideoById .

Куда я могу позвонить, что я получу?

Так что же все доступно для вызова, и с какими событиями нам предстоит работать? В скачанном вами архиве релиза есть полная документация по коду, чтобы получить подробную информацию. В качестве краткого обзора, как для Movie.as, так и для MovieSprite.as у вас есть следующие методы:

seekTo(seconds:Number, allowSeekAhead:Boolean=true):void

setVolume(volume:Number):void

getVolume():Number

unMute():void

mute():void

clearVideo():void

setSize(width:Number, height:Number):void

loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] 

cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] 

stopVideo():void

playVideo():void

pauseVideo():void

destroy():void

В дополнение к этим методам в компоненте Movie.as у вас есть доступ к следующим свойствам:

playerReady:Boolean

chromeless:Boolean

videoId:String

stateDescription:String

currentTime:Number 

duration:Number 

videoUrl:String 

videoEmbedCode:String 

volume:Number

Вот события, на которые вы можете подписаться. Вы можете найти более подробную информацию в документации.

onError

onStateChange

onMovieStateUpdate

onMovieProgress

onPlayerReady

onPlayerUnload

Заключение

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

Надеюсь, это будет исправлено в свое время. Поэтому, пожалуйста, если вы обнаружите ошибки или нехватку какой-либо функции, посетите проект Google Code и сообщите об этом в системе отслеживания проблем. Спасибо за прочтение!

Биография автора

Бен Лонгория — разработчик академических приложений в Университете Висконсин-Мэдисон. Он занимается разработкой с использованием Flash, начиная с Flash 5, и Flex, начиная с выпуска Flex 2. В течение последних 2 лет он также занимался разработкой приложений для Mozilla. Бен работал над рядом образовательных и академических проектов, включая кроссплатформенные приложения, предназначенные как для браузера, так и для настольных компьютеров. Он принимает активное участие в дизайне интерфейсов и взаимодействий, и ему нравится создавать полезное программное обеспечение. Вы можете найти его блог по адресу http://enefekt.com/sansbrowser/ и прочитать его материалы для InsideRIA .

Эта работа находится под лицензией Creative Commons Attribution 3.0 United States License .