Este artigo foi escrito e enviado por um desenvolvedor externo. A equipe da API do YouTube agradece a Ben Longoria pelo tempo e pela experiência.
Ben Longoria, Universidade de Wisconsin - Madison, Academic Technology
fevereiro de 2009
- Introdução
- O cenário atual
- Como usar o Movie.as
- Como usar o MovieSprite.as
- What Can I Call, What Do I Get?
- Conclusão
Introdução
Figura 1: demonstração do player TubeLoc sem Chrome
Uau. No momento em que este artigo foi escrito, a API Player do YouTube tinha apenas um mês. Quantos anos de Internet isso representa? Vários projetos incríveis foram criados com base na API. Basta seguir o blog da API YouTube Developer para saber que há muitas pessoas que fizeram coisas incríveis com ela.
O conjunto atual de aplicativos do player da API do YouTube é escrito em ActionScript 2. Embora essa seja uma linguagem excelente, muitas pessoas agora estão usando ActionScript 3 e/ou Flex. O problema é que você precisa passar por alguns obstáculos para que os aplicativos ActionScript 2 se comuniquem com os aplicativos ActionScript 3. "Mas espere... Acho que já ouvi isso antes. Não existe algo para isso?", você pode perguntar.
Muitas pessoas já descobriram como fazer isso e compartilharam suas experiências nos fóruns de desenvolvedores da API YouTube. Também houve os projetos AS3 Chromeless Wrapper e Flex Embedded Player para facilitar o uso por desenvolvedores.
Queria uma maneira fácil e simples de reutilizar a funcionalidade da API Player apenas no ActionScript 3 ou MXML. Uma classe sem Flex para projetos alérgicos a ele e um componente Flex fácil de usar para projetos que adoram o Flex. O TubeLoc atende aos dois requisitos
O TubeLoc (um mashup do YouTube e do LocalConnection) é uma biblioteca ActionScript 3 que funciona como um adaptador para a API Player do YouTube ActionScript 2. É possível adicionar facilmente a funcionalidade de vídeo do YouTube aos seus aplicativos ActionScript 3 ou Flex com os players do YouTube com ou sem moldura. O TubeLoc usa a classe LocalConnection para se comunicar com um SWF mediador do ActionScript 2. O SWF do ActionScript 2 se comunica com o player oficial da API do YouTube. Como usar isso?
O cenário atual
Primeiro, faça o download da versão atual da biblioteca no projeto Google Code. Depois de descompactar o arquivo ZIP de lançamento, você vai encontrar um diretório as3. Abaixo dele está o diretório src, que inclui algumas classes de exemplo. Use-os como ponto de partida. Em com/enefekt/tubeloc no diretório src, há dois arquivos. O Movie.as pode ser usado em projetos Flex, e o MovieSprite.as pode ser usado em projetos ActionScript 3. Em com/enefekt/tubeloc/event, há várias classes de eventos para as diferentes notificações que podem ser enviadas pelo player.
Antes de testar os exemplos deste tutorial, verifique se o diretório src no diretório as3 está no seu caminho de classe. O processo para fazer isso é diferente dependendo do que você usa para desenvolver. Portanto, consulte a documentação do seu ambiente de desenvolvimento.
Depois de compilar a demonstração ou o aplicativo, você vai precisar do SWF do ActionScript 2 que se comunica com a API Player do YouTube. Você pode encontrar esse SWF no arquivo de versões aqui: as3/lib/as2_tubeloc.swf. Basta verificar se ele está ao lado do arquivo HTML que está incorporando seu aplicativo SWF, como este:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Observação: é possível mudar o caminho para esse SWF usando a propriedade playerWrapperUrl com a biblioteca.
Como usar o Movie.as
Vamos conferir como usar a versão Flex do TubeLoc. Vamos analisar primeiro o player completo (com todos os controles) e depois o player sem controles. Confira como usar o player full-chrome em MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Eu sei, eu sei, é doloroso, certo? De jeito nenhum. Vamos fazer uma loucura e remover o Chrome:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Estamos adicionando mais um atributo, só isso. Confira como o arquivo MXML ficaria:
<?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>
Observação: no elemento mx:Application, adicionamos o namespace tubeloc com o pacote para o componente Movie. Depois disso, podemos usar o componente como demonstrado. Mais tarde, vamos analisar o que está disponível para definir e chamar esse componente.
Como usar o MovieSprite.as
Agora vamos conferir como usar a versão ActionScript 3 do TubeLoc. Essa versão não requer classes do framework Flex e usa apenas classes nativas do Flash Player. Vamos analisar como fazer o player com controles e depois o sem controles. Confira um exemplo completo:
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;
}
}
}
Primeiro, importamos as classes TubeLoc necessárias. Em seguida, no construtor, criamos uma instância da classe MovieSprite e transmitimos o ID do vídeo para o construtor do MovieSprite. Em seguida, adicionamos um listener de eventos para o PlayerReadyEvent. No manipulador de eventos onPlayerReady, definimos o tamanho do filme. Observação: como estamos usando o player full-chrome, estamos aproveitando uma propriedade estática CHROME_HEIGHT na classe MovieSprite. Isso nos ajuda a dimensionar o filme considerando a altura do chrome.
E o player sem controles?
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");
}
}
}
O que vai mudar? No construtor, transmitimos null para o ID do vídeo, e o segundo parâmetro true informa à classe MovieSprite que vamos usar o Chromeless. Você também vai notar uma diferença no manipulador de eventos onPlayerReady. É aqui que carregamos o vídeo por ID usando o método loadVideoById.
What Can I Call, What Do I Get?
O que está disponível para chamada e com quais eventos precisamos trabalhar? No arquivo de lançamento que você fez o download, há uma documentação completa do código para conferir os detalhes. Como visão geral rápida, para Movie.as e MovieSprite.as, você tem estes métodos:
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
Além desses métodos, no componente Movie.as, você tem acesso a estas propriedades:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Confira os eventos para se inscrever. Consulte mais detalhes na documentação.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Conclusão
Esperamos que este artigo tenha ajudado você a integrar a funcionalidade e o conteúdo do YouTube nos seus aplicativos Flash. Há uma limitação que você precisa considerar ao desenvolver com o TubeLoc: não é possível ter dois players do YouTube no palco ao mesmo tempo.
Esperamos que isso seja resolvido em breve. Portanto, quando você encontrar bugs ou recursos ausentes, acesse o projeto do Google Code e informe no Issue Tracker. Agradecemos por ler.
Biografia do autor
Ben Longoria é desenvolvedor de aplicativos acadêmicos da Universidade de Wisconsin-Madison. Ele desenvolve com o Flash desde a versão 5 e com o Flex desde a versão 2. Nos últimos dois anos, ele também desenvolveu aplicativos com tecnologia Mozilla. Ben trabalhou em vários projetos educacionais e acadêmicos, incluindo aplicativos multiplataforma voltados para navegadores e computadores. Ele tem um papel ativo no design de interface e interação e gosta do desafio de criar softwares úteis. O blog dele está em http://enefekt.com/sansbrowser/, e você pode ler as contribuições dele para o InsideRIA.
Este conteúdo está licenciado sob a Licença Creative Commons Atribuição 3.0 dos Estados Unidos.