Este artigo foi escrito e enviado por um desenvolvedor externo. A equipe da API do YouTube agradece Ben Benoria pelo tempo e pela experiência.
Ben Longoria, Universidade de Wisconsin, Madison, tecnologia acadêmica
Fevereiro de 2009
- Introdução
- A Lei da Terra
- Como usar o Movie.as
- Como usar o MovieSprite.as
- O que posso chamar? O que eu ganho?
- Conclusão
Introdução
Figura 1: demonstração do player sem cromo no TubeLoc
Uau! Em apenas um mês, até o presente momento, a API do Player do YouTube terá um ano. Quantos anos tem a Internet? Vários projetos foram criados na API. Você só precisa seguir o Blog da API YouTube Developer para ver se há muitas pessoas que fizeram isso bem.
O conjunto atual de aplicativos de player da API do YouTube é escrito em ActionScript 2 e, embora ele continue sendo uma ótima linguagem, muitas pessoas já usam o ActionScript 3 e/ou o Flex. O problema é que é preciso executar algumas etapas para que os aplicativos do ActionScript 2 se comuniquem com os aplicativos do ActionScript 3. "Mas espere, acho que já ouvi isso. Ainda não há algo para isso?", você pode perguntar.
Muitas pessoas já descobriram como fazer isso e gentilmente expuseram nos Fóruns de desenvolvedores da API do YouTube. Também temos os projetos AS3 Chromeless Wrapper e Flex Embedded Player para facilitar o uso desses recursos.
Eu queria uma maneira fácil e simples de reutilizar a funcionalidade da API do Player apenas em ActionScript 3 ou MXML. Uma aula flexível para projetos alérgicos e um componente Flex fácil de usar para projetos que amam o Flex. O TubeLoc atendeu aos dois requisitos
O TubeLoc (um mashup do YouTube e da LocalConnection) é uma biblioteca do ActionScript 3 que serve como adaptador para a API do Player do YouTube 2. Você pode adicionar facilmente a funcionalidade de vídeo do YouTube a seus aplicativos ActionScript 3 ou Flex com os players do YouTube completos ou sem controles. O TubeLoc usa a classe LocalConnection na comunicação com um SWF do mediador do ActionScript 2. O SWF do ActionScript 2 se comunica com o player oficial da API do YouTube. Como usamos isso?
A Lei da Terra
Primeiro, faça o download da versão atual da biblioteca no projeto do Google Code (link em inglês). Depois de descompactar o arquivo ZIP de lançamento, você encontrará um diretório as3 nele. Veja abaixo o diretório src, que inclui algumas classes de amostra. Use esses pontos como ponto de partida. Em com/enefekt/tubeloc, no diretório src, há dois arquivos. O Movie.as pode ser usado nos projetos Flex, e o MovieSprite.as pode ser usado nos projetos do ActionScript 3. Em com/enefekt/tubeloc/event, há várias classes de evento para as diferentes notificações que podem ser enviadas do player.
Antes de testar os exemplos neste 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, verifique a documentação do seu ambiente de desenvolvimento.
Depois de compilar sua demonstração ou aplicativo, você precisará do SWF do ActionScript 2 que se comunica com a API do Player do YouTube. Você pode encontrar este SWF no arquivo de versão aqui: as3/lib/as2_tubeloc.swf. Certifique-se de que ele está ao lado do arquivo HTML que incorpora seu aplicativo SWF, como em:
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 ver como usar a versão Flex do TubeLoc. Primeiro, veremos o player completo do Chrome (com todos os controles) e depois o player sem cromo BYOC. Veja como usar o player completo do Chrome no MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Eu sei, doloroso, certo? De jeito nenhum. Vamos estragar a memória e fazer o Chromeless:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Estamos melhorando o processo com mais um atributo. Esta é a aparência de todo o arquivo 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>
Observação: no elemento mx:Application, adicionamos o namespace tubeloc com o pacote para o componente "Filme". Depois de fazer isso, podemos usar o componente conforme demonstrado. Mais tarde, vamos ver o que está disponível para definir e chamar nesse componente.
Como usar o MovieSprite.as
Agora vamos ver como usar a versão 3 de TubeLoc do ActionScript 3. Essa versão não exige classes do framework Flex e usa apenas classes nativas do Flash Player. Primeiro, veremos como fazer o player completo do Chrome e depois o player sem cromo. Veja 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 necessárias do TubeLoc. Em seguida, no construtor, criamos uma instância da classe MovieSprite e passamos nosso ID de 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 completo do Chrome, vamos usar uma propriedade estática CHROME_HEIGHT na classe MovieSprite. Isso nos ajuda a dimensionar o filme, considerando a altura do cromo.
E o player sem cromo?
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 Chrome. Você também vai notar uma diferença no manipulador de eventos onPlayerReady. Aqui, carregamos nosso vídeo por ID usando o método loadVideoById.
Como posso chamar o quê?
O que está disponível e quais eventos precisamos trabalhar? No arquivo de versão transferido por download, há a documentação do código completo para ver os detalhes. Como visão geral, você pode usar os seguintes métodos para Movie.as e 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
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
Veja os eventos em que você pode se inscrever. Veja mais detalhes na documentação.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Conclusão
Espero que este artigo tenha ajudado a integrar a funcionalidade e o conteúdo do YouTube nos seus apps em Flash. Há uma limitação a ser lembrada durante o desenvolvimento com o TubeLoc: não é possível ter dois jogadores do YouTube no cenário ao mesmo tempo.
Esperamos que isso seja resolvido no prazo. Por isso, se você encontrar bugs ou algum recurso ausente, acesse o projeto do Google Code e informe o problema no Issue Tracker. Agradecemos por ler.
Biografia do autor
Ben Longoria é desenvolvedor acadêmico de aplicativos para a Universidade de Wisconsin-Madison. Ele desenvolve com o Flash desde o Flash 5 e com o Flex desde a versão Flex 2. Nos últimos dois anos, ele também desenvolveu aplicativos com a tecnologia Mozilla. Ben já trabalhou em diversos projetos educacionais e acadêmicos, incluindo aplicativos multiplataforma voltados para navegadores e computadores. Ele assume um papel ativo no design de interfaces e interações e gosta do desafio de criar software utilizável. Veja o blog dele em http://enefekt.com/sansbrowser/ e leia as contribuições dele para InsideRIA.
Este trabalho está licenciado sob a Licença Creative Commons Attribution 3.0 Estados Unidos.