Este artigo foi escrito e enviado por um desenvolvedor externo. A equipe de APIs e ferramentas do YouTube agradece Matthew Richmond pelo tempo e pela experiência.
Matthew Richmond, Bloco de corte, Inc.
Outubro de 2008
- Introdução
- Recursos importantes
- Digging In
- Como interagir com o player
- Operações disponíveis
- Observações sobre a demonstração
- Conclusão
Introdução
Neste artigo, apresentarei e descreverei de forma breve um Wrapper ActionScript 3.0 confiável para o player sem cromo do YouTube. O wrapper aproveita a classe ExternalInterface do ActionScript e a API JavaScript do YouTube.
As ferramentas do player do YouTube e o player sem Chrome do Google ajudaram designers e desenvolvedores a integrar de forma rápida e fácil o poder do YouTube aos projetos on-line. Essa abordagem é ideal para projetos pequenos com orçamentos fixos que não permitem a hospedagem de vídeos e para projetos de grande escala para clientes que querem uma experiência personalizada do usuário final sem se distanciarem do público do YouYube.
Figura 1: captura de tela do wrapper do ActionScript 3.0
A API Flash e os players incorporados do YouTube são criados em ActionScript 2.0 e funcionam muito bem com ele. No entanto, se o projeto for ActionScript 3.0, a integração perfeita fica um pouco mais complexa. Embora seja fácil carregar os players ActionScript 2.0 em um swf ActionScript 3.0, não é possível comunicar ou transmitir diretamente chamadas funcionais para o player carregado. Isso é ainda mais complicado porque o arquivo swf que vem dos servidores do YouTube está carregando um vídeo em si mesmo. Nosso wrapper precisa estar totalmente ciente desse fato e reagir de acordo. Felizmente, a linguagem ActionScript contém duas soluções plausíveis para reconectar essas partes aninhadas, mas desconectadas, a classe LocalConnection ou a classe ExternalInterface. Esta demonstração vai se concentrar no último, porque a ExternalInterface funciona perfeitamente com a API JavaScript bem documentada e, portanto, funciona bem com qualquer outra coisa na página XHTML.
Recursos importantes
Antes de começarmos, aqui está uma lista de recursos relacionados e arquivos disponíveis para você. Muitos dos tópicos discutidos neste artigo são detalhados nos links abaixo.
- Conferir o Wrapper do ActionScript 3.0 e fazer o download dos arquivos de origem
- Referência oficial da API do player JavaScript do YouTube
- Documentação da classe Adobe ExternalInterface
- Inserção de JavaScript Flash do SWFObject
Análise detalhada
Visão geral da demonstração do wrapper
Figura 3: arquivo JavaScript
Figura 2: arquivos de classe do ActionScript
O Wrapper do Floodlight 3.0 consiste basicamente em duas partes interconectadas, os arquivos de classe do ActionScript 3.0 localizados em src/choppingblock/video/ (Figura 2) e o arquivo "youTubeLoader.js" Arquivo JavaScript localizado em deploy/_assets/js/ (Figura 3). Seu arquivo de origem Flash/Flex criará uma instância da classe YouTubeLoader Action. sua página HTML incorpora o arquivo flash e o registra com as funções dentro do arquivo JavaScript do youTubeLoader. É fundamental entender que, daqui para frente, tudo o que o YouTubeLoader faz no arquivo flash é controlado pelas funções JavaScript.
Como todas as funcionalidades do Flash são controladas pela API JavaScript, você NÃO poderá carregar nenhum conteúdo do YouTube no "Filme de teste" do Flash. de futebol. Ele só vai funcionar quando incorporado a uma página XHTML e conectado corretamente às funções JavaScript do youTubeLoader.
Observação: para testar qualquer uma dessas chamadas, é necessário que seu arquivo seja executado em um servidor da Web ou modifique as Configurações de segurança de seu Flash Player, já que ele restringe as chamadas entre arquivos locais e a Internet.
Como criar um objeto YouTubeLoader
Antes de criar uma instância do objeto YouTubeLoader em seu projeto Flash/Flex, você deve primeiro verificar se o pacote (pasta) de arquivos necessários está no mesmo diretório que seu projeto (veja a Figura 2) ou definido com o Classpath do projeto. Em seguida, importe os arquivos do pacote:
import choppingblock.video.*;
Isso permite que o arquivo ActionScript acesse as classes "YouTubeLoader.as" e "YouTubeLoaderEvent.as". Agora está claro para criar uma instância da classe YouTubeLoader e os listeners de eventos necessários:
import choppingblock.video.*;
public class YouTubeDemo extends Sprite {
private var _youTubeLoader:YouTubeLoader;
// ------------------------------------
// CONSTRUCTOR
// ------------------------------------
public function YouTubeDemo () {
// create YouTubeLoader object
_youTubeLoader = new YouTubeLoader();
// add event listener to call youTubePlayerLoadedHandler method on load
_youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler);
// create the actual loader
_youTubeLoader.create();
// add object to the display stack
addChild(_youTubeLoader);
};
// ------------------------------------
// EVENT METHODS
// ------------------------------------
/**
Called via player loaded event, lets you know you are all clear to send player commands.
*/
private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeDemo: youTubePlayerLoadedHandler");
// you are now clear to start making calls to the YouTubeLoader object
};
};
Agora, se o arquivo JavaScript estiver no lugar e conectado corretamente, o youTubePlayerLoadedHandler será chamado e estaremos prontos para começar a fazer solicitações.
Incorporação do SWF e conexão do JavaScript do YouTubeLoader
Você não conseguirá carregar conteúdo do YouTube até que seu arquivo SWF esteja incorporado em um arquivo HTML e conectado ao JavaScript do youTubeLoader. Recomendamos o uso do SWFObject para incorporar todos os players que serão acessados usando a API JavaScript. Isso permite detectar a versão do Flash Player do usuário final (a API JavaScript exige o Flash Player 8 ou mais recente) e também se livrar da caixa "Clique para ativar esse controle" ao usar o Internet Explorer para acessar o player.
Na parte <head> do arquivo XHTML, conecte os arquivos swfobject e youTubeLoader:
<script type="text/javascript" src="_assets/js/swfobject.js"></script> <script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>
Veja abaixo um exemplo de como usar o SWFObject para incorporar o SWF do Floodlight 3.0 com a API JavaScript ativada e, em seguida, transmita uma referência ao SWF para a API JavaScript do youTubeLoader.
<script type="text/javascript">
var flashvars = {};
var params = {
menu: "false",
allowScriptAccess: "always",
scale: "noscale"
};
var attributes = {
id: "youtubewrapper"
};
swfobject.embedSWF("YouTubeIntegrationDemo.swf", "flashcontent", "960", "500", "9.0.0", "_assets/swf/expressInstall.swf", flashvars, params, attributes);
//init the youTubeLoader JavaScript methods
SWFID = "youtubewrapper"
</script>
O parâmetro allowScriptAccess no código é necessário para permitir que o SWF do player chame funções na página HTML que o contém, já que o player sem cromo está hospedado em um domínio diferente do da página HTML.
O único atributo que estamos transmitindo é o ID do objeto de incorporação, neste caso, youtubewrapper. Esse ID é o que o arquivo youTubeLoader.js vai usar para receber uma referência ao player usando getElementById().
swfobject.embedSWF vai carregar o player do YouTube e incorporá-lo à sua página.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
swfUrlStr: é o URL do SWF. Adicionamos os parâmetrosenablejsapieplayerapiidao URL normal do SWF do YouTube para ativar as chamadas de API JavaScript.replaceElemIdStr: é o ID do DIV HTML a ser substituído pelo conteúdo incorporado. No exemplo acima, éytapiplayer.widthStr: largura do player.heightStr: altura do jogador.swfVersionStr: a versão mínima necessária para o usuário ver o conteúdo. Neste caso, a versão 8 ou superior é necessária. Se o usuário não tiver a versão 8 ou superior, verá a linha de texto padrão no elemento HTML DIV.xiSwfUrlStr: (opcional) especifica o URL do SWF de instalação expressa. Não é utilizado neste exemplo.flashVarsObj: (opcional) especifica os FlashVars em pares de nome:valor. Não é utilizado neste exemplo.parObj: (opcional) os parâmetros do objeto de incorporação. Neste caso, definimosallowScriptAccess.AttObj: (opcional) os atributos do objeto de incorporação. Neste caso, definimos o ID comomyytplayer.
Consulte a documentação do SWFObject para mais detalhes.
SWFID ≡ vai armazenar uma referência ao ID do objeto de incorporação para a API JavaScript usar. É necessário usar o mesmo ID do objeto de incorporação que você atribuiu ao swf.
SWFID ≡ "youtubewrapper"
Neste ponto, você já pode testar seu projeto. O objeto YouTubeLoader precisa carregar o player sem Chrome e o manipulador de eventos YouTubeLoaderEvent.LOADED precisa ser chamado. Agora estamos prontos para fazer uma solicitação de vídeo e interagir com o objeto YouTubeLoader.
Como interagir com o player
Como essa abordagem para criar um wrapper do ActionScript 3.0 para o player sem Chrome aproveita a classe ExternalInterface do ActionScript, agora podemos usar qualquer uma das operações na API Player JavaScript do YouTube para controlar o player carregado. Se você olhar o arquivo JavaScript "youTubeLoader.js" em deploy/_assets/js/ (Figura 3), vai encontrar a maioria das funções disponíveis. Cada função de operação verifica primeiro a função checkObj para verificar se a variável SWFID foi definida corretamente antes da execução.
//------------------------------------
// UTILITY METHODS
//------------------------------------
function checkObj () {
// alert("youTubeLoader.js : checkObj");
if (SWFID) {
createObj();
return true;
} else{
alert("YouTubeLoader: In order to call methods within a swf, you must first set the variable \"SWFID\"!");
return false;
};
}
//------------------------------------
// YOUTUBE METHODS
//------------------------------------
function loadVideoById(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.loadVideoById(id,startSeconds);
};
};
function cueNewVideo(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.cueVideoById(id, startSeconds);
}
}
function clearVideo() {
// alert("youTubeLoader.js : clearVideo");
if (checkObj()) {
obj.clearVideo();
}
}
// plus 17 more...
Considerando que o objetivo final de nosso wrapper para o ActionScript 3.0 para o player sem cromo é oferecer uma interação perfeita com a API do YouTube a partir de um projeto Flash/Flex do ActionScript 3.0, adicionamos exatamente os mesmos métodos públicos ao arquivo "YouTubeLoader.as" localizado em src/choppingblock/video/ (Figura 2). Isso significa que você pode chamar as mesmas operações diretamente no objeto YouTubeLoader no Flash/Flex. Se você procurar no arquivo da turma, vai encontrar:
// ------------------------------------
// YOUTUBE METHODS
// ------------------------------------
public function loadVideoById (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: loadVideoById");
ExternalInterface.call("loadVideoById", id, startSeconds);
};
public function cueNewVideo (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: cueNewVideo");
ExternalInterface.call("cueNewVideo", id, startSeconds);
};
public function clearVideo ():void{
//trace("YouTubeLoader: clearVideo");
ExternalInterface.call("clearVideo");
};
// plus 17 more...
Os métodos ActionScript usam a classe ExternalInterface para simplesmente chamar a função apropriada na API JavaScript.
Como solicitar um vídeo
Agora é possível solicitar um vídeo no seu arquivo ActionScript 3.0 chamando funções usando a referência do player. Por exemplo, para reproduzir o vídeo quando um usuário clicar em um botão, adicione um listener de evento MouseEvent.CLICK ao botão. Assim:
// assuming your button was called 'myButton' myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);
E criar um método de manipulador de eventos para tratar da solicitação. Assim:
private function youtubeLoadVideoHandler (event:MouseEvent):void{
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};
Fora do arquivo Flash/Flex, você tem a opção de solicitar um vídeo chamando diretamente a função JavaScript correspondente. Assim:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a> Como emitir outras chamadas
As chamadas adicionais funcionam como a opção Solicitar um vídeo. no ActionScript 3, basta chamar métodos usando a referência do player. Veja abaixo uma lista completa dos métodos disponíveis.
Inscrever-se em eventos
Inscreva-se nos eventos adicionando uma escuta de evento à referência do player. Por exemplo, para receber uma notificação quando o estado do player mudar, adicione um listener de eventos para YouTubeLoaderEvent.STATE_CHANGE. Assim:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
E crie um método de manipulador de eventos para processar a solicitação. Assim:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Operações disponíveis
Para chamar os métodos da API do YouTubePlayer, você deve primeiro criar uma instância da classe YouTubePlayer no seu arquivo ActionScript e armazenar uma referência ao objeto YouTubePlayer que quer controlar. Isso pode ser feito chamando:
var _youTubeLoader:YouTubeLoader; _youTubeLoader = new YouTubeLoader();
Métodos públicos
player.loadVideoById(id:String, startSeconds:Number = 0):void- Carrega e reproduz o vídeo com base no ID especificado.
player.cueNewVideo(id:String, startSeconds:Number = 0):void- Carrega, mas não reproduz automaticamente o vídeo com base no ID especificado.
player.clearVideo():void- Limpa o vídeo carregado/selecionado.
player.setSize(w:Number, h:Number):void- Define o tamanho da instância do YouTubePlayer.
player.play():void- Reproduz o vídeo carregado/selecionado.
player.pause():void- Pausa o vídeo indicado/carregado no momento.
player.stop():void- Interrompe o vídeo indicado/carregado no momento.
player.seekTo(seconds:Number):void- Busca um tempo especificado no vídeo indicado/carregado no momento.
player.getPlayerState():String- Retorna o estado atual do vídeo indicado/carregado no momento.
player.getBytesLoaded():Number- Retorna o valor dos bytes atuais carregados do vídeo indicado/carregado no momento.
player.getBytesTotal():Number- Retorna o valor do total de bytes carregados do vídeo carregado/sinalizado.
player.getCurrentTime():Number- Retorna a posição atual no tempo do vídeo carregado/sinalizado.
player.getDuration():Number- Retorna a duração atual do vídeo indicado/carregado no momento.
player.getStartBytes():Number- Retorna os bytes iniciais do vídeo indicado/carregado no momento.
player.setVolume(newVolume:Number):void- Define o volume do vídeo indicado/carregado no momento.
player.getVolume():Number- Retorna o volume atual do vídeo indicado/carregado no momento.
player.mute():void- Armazena o volume atual e muda o volume do vídeo atualmente indicado/carregado para 0.
player.unmute():void- Retorna o volume do vídeo selecionado/carregado para o último valor armazenado quando silenciado.
player.getEmbedCode():String- Retorna o código de incorporação atual do YouTube do vídeo indicado/carregado no momento.
player.getVideoUrl():String- Retorna o URL atual do vídeo do YouTube referente ao vídeo indicado/carregado no momento.
Eventos
YouTubeLoaderEvent.LOADED- É acionado quando o Player sem Chromeless termina de carregar e está pronto para aceitar chamadas de operações.
YouTubeLoaderEvent.STATE_CHANGE- É disparado sempre que o estado do jogador muda. A classe YouTubeLoader converte os números da API JavaScript em seus valores de string relacionados. A classe YouTubeLoaderEvent armazena o evento atual em uma variável chamada
state. Os valores possíveis são: não iniciado, finalizado, em reprodução, pausado, armazenamento em buffer e vídeo indicado. Quando o SWF for carregado pela primeira vez, ele vai transmitir um evento não iniciado. Quando o vídeo estiver pronto para ser reproduzido, ele vai transmitir um evento de sinalização de vídeo. YouTubeLoaderEvent.IO_ERROR- Acionado quando ocorre um erro no player. Há dois códigos de erro possíveis: 100 é transmitido quando o vídeo solicitado não é encontrado. Isso ocorrerá quando um vídeo tiver sido removido (por qualquer motivo) ou se tiver sido marcado como privado. O vídeo 101 é transmitido quando o vídeo solicitado não permite a reprodução nos players incorporados.
Observações sobre a demonstração
Para fins de demonstração, queríamos incluir os campos de formulário, botões e a interface de exibição XHTML abaixo do wrapper ActionScript 3 incorporado. Para ter o arquivo SWF E a atualização XHTML ao mesmo tempo, tivemos que incluir duas linhas de código no arquivo JavaScript "youTubeLoader.js", localizado em "deploy/_assets/js/" (Figura 3). Convém remover as duas linhas a seguir [69, 79] ao integrar esse arquivo em seu projeto:
//------------------------------------
// SPECIAL YOUTUBE EVENT METHODS
//------------------------------------
function onYouTubePlayerReady(playerId) {
if (checkObj()) {
obj.addEventListener("onStateChange", "onytplayerStateChange");
};
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnYouTubePlayerReady(playerId);
}
function onytplayerStateChange(newState) {
//alert("Player's new state: " + newState);
obj.playerStateUpdateHandler(newState);
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnytplayerStateChange(newState)
}
O arquivo de demonstração e as bibliotecas de ActionScript incluídas são softwares sem custo financeiro: você pode redistribuí-los e/ou modificá-los de acordo com os termos da Licença Pública Geral GNU Lesser. Esses arquivos são distribuídos na esperança de que sejam úteis, mas sem qualquer garantia.
Conclusão
Este artigo, a demonstração e os arquivos de origem oferecem uma visão geral sólida de uma solução relativamente simples e confiável para integrar a API do YouTube e os players incorporados a ambientes do ActionScript 3 usando a biblioteca de wrapper que desenvolvemos para nossos próprios projetos. Como comentei grande parte do código, é ideal que seja bastante simples explorar e reutilizar as bibliotecas. Elas não são isentas de limitações e sempre há espaço para melhorias, refatoração e aprimoramento. Se você tiver alguma ideia sobre isso, entre em contato comigo.
Biografia do autor
Matthew Richmond tem 14 anos de experiência em design interativo, desenvolvimento e arquitetura. Quando não está no estúdio, ele pode ensinar técnicas de ilustração/fotografia digitais e técnicas avançadas de escrita na Escola de Artes Visuais. Mateus é um sócio fundador e designer em choppingblock.com.