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

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

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

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

Введение

Рисунок 1. Демо-версия Chromeless Player TubeLoc

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

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

Многие люди уже поняли, как это сделать, и любезно поделились своими знаниями на форумах разработчиков API YouTube . Также были созданы проекты 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 Player. Вы можете легко добавить функции видео 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. Вот как вы используете полнофункциональный проигрыватель Chrome в MXML:

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

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

<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, мы используем статическое свойство 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 , что мы отказываемся от Chrome. Вы также заметите разницу в обработчике событий 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. Последние два года он также занимается разработкой приложений на базе Mozilla. Бен работал над рядом образовательных и академических проектов, включая кроссплатформенные приложения, ориентированные как на браузер, так и на компьютер. Он принимает активное участие в разработке интерфейсов и взаимодействий, а также любит создавать полезное программное обеспечение. Вы можете найти его блог по адресу http://enefekt.com/sansbrowser/ и прочитать его статьи в InsideRIA .

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