O Google sempre torna o acesso aos seus serviços o mais simples possível e fortalecendo ainda mais esse conceito ele lançou este mês a Versão 3.0 da Player API, que é a Interface de Programação de Aplicativos que permite que usemos o “chromeless player” (player sem controles) do youtube, inserindo este dentro de nossos sites ou serviços.
O Player
A nova API tem um funcionamento muito simples e intuitivo, baseado em eventos e utilizando a classe Loader para carregar o player.
Lembrando que a Player API permite que você utilize o player sem os controles padrões do youtube, garantindo a você uma personalização maior porém não entrega diretamente a URL do vídeo para você utilizar, ou seja, o que você faz é carregar o player utilizando a classe Loader, transforma ele em objeto e então acessa os métodos utilizando o padrão para objetos, que é obj.method();
Conceitos básicos
Carregando o player
Para carregar o player tudo o que você precisa fazer é utilizar um objeto Loader e carregar a URL do player, disponibilizada pelo Youtube que é: http://www.youtube.com/apiplayer?version=3
Veja em: http://code.google.com/apis/youtube/flash_api_reference.html#GettingStarted
Dessa forma:
1 2 3 | var playerloader:Loader = new Loader(); playerloader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3")); addChild(playerloader); |
Controle por Eventos
Como eu comentei no início, a API é toda baseada em eventos e não somente os eventos padrão da Flash API, mas os eventos personalizados do player, que são quem define quando as mudanças e a reprodução acontecem, além de informar o status da reprodução e as mensagens de erro, são 4 principais eventos:
- “onReady” – É o evento que o player dispara quando está devidamente carregado e configurado no ambiente;
- “onStateChange” – É o evento disparado em toda mudança de status da reprodução como ‘play’, ‘pause’, ‘buffer’, etc;
- “onPlaybackQualityChange” – É o evento disparado sempre que é alterada a opção de qualidade do vídeo, que pode ser feita a qualquer momento;
- “onError” – Evento de erro
O caminho para funcionamento do player e reprodução do vídeo é carregar o player utilizando o objeto Loader, ao término do carregamento do player adicionar os eventos do próprio player e nesses eventos executar os métodos do player, através do objeto criado, ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var playerloader:Loader = new Loader(); var player:Object; playerloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPlayerLoadComplete); function onPlayerLoadComplete(event:Event):void { addChild(playerloader); playerloader.content.addEventListener("onReady", startVideos); } function startVideos(event:Event):void { player = playerloader.content; player.loadVideo("videoid", 0, "medium"); } |
Note que os eventos que controlam o player são adicionados apenas após o evento “onReady” ser disparado.
Agora veja como criar um player utilizando esta API, com mais personalização.
Player de Exemplo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 | package { import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.utils.Dictionary; /** * Youtube * @author Eder Lima * @author url http://www.ederlima.com.br * @author twitter http://www.twitter.com/ederlemon * @copy FlashPedia - http://www.flashpedia.com.br * * Este player utilizando a Video Player Api do Youtube tem por * objetivo ensinar aos developers iniciantes os conceitos básicos de * interação com a nova API AS3 do player do youtube. * * Se reutilizar, por favor, mantenha os créditos. * */ public class Youtube extends Sprite { //criando o objeto que vai receber o player private var player:Object; //criando o objeto Loader que vai carregar o player private var playerloader:Loader = new Loader(); //criando um dicionário para tratar as respostas do status da reprodução private var sd:Dictionary = new Dictionary(); //criando as variáveis utilizadas na amostragem do tempo //minutos private var m:int; //segundos private var s:int; //variável string para uso temporário no arredondamento do tempo private var rt:String; //Construtor da DocumentClass //Excutado automaticamente ao iniciar o filme public function Youtube() { //Carregando o player assim que adicionado ao palco addEventListener(Event.ADDED_TO_STAGE, loadPlayer); //configurando o ambiente configure(); } //Carregando o player private function loadPlayer(event:Event):void { //removendo o evento para início do filme removeEventListener(Event.ADDED_TO_STAGE, loadPlayer); //adicionando uma função ao evento "complete" do loader playerloader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadPlayerComplete); //carregando a partir da url da API playerloader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3")); } //Configurando o ambiente private function configure():void { //Populando o dicionário com as mensagens de status para cada código (de -1 a 5) sd[-1] = "Waiting..."; sd[0] = "Ended"; sd[1] = "Playing..."; sd[2] = "Paused..."; sd[3] = "Bufering..."; sd[5] = "Cue..."; //Adicionando o handcursor nos botões de interação playbutton.buttonMode = true; pausebutton.buttonMode = true; stopbutton.buttonMode = true; gobutton.buttonMode = true; } //Função do evento "complete" do loader private function loadPlayerComplete(event:Event):void { //Adiciona o player no container container.addChild(playerloader); //Adiciona uma função ao evento "onReady" que é disparado pelo player //Esse evento é quem dá início ao carregamento e reprodução do primeiro filme playerloader.content.addEventListener("onReady", onPlayerReady); //Adiciona uma função ao evento de Erro playerloader.content.addEventListener("onError", onPlayerError); //Adiciona uma função ao evento de Status playerloader.content.addEventListener("onStateChange", onPlayerStateChange); //Adiciona uma função ao evento de mudança de qualidade playerloader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange); } //Função do evento "onReady" do player private function onPlayerReady(event:Event):void { //Informando no status ps.text = "Player ready..."; //recebendo o conteúdo do playerloader como objeto (para que possa executar métodos) player = playerloader.content; //Iniializando a função que carrega o primeiro vídeo loadVideo(); //Adicionando funções de controle aos botões 'play', 'pause', 'stop' e 'go' playbutton.addEventListener(MouseEvent.CLICK, playByClick); pausebutton.addEventListener(MouseEvent.CLICK, pauseByClick); stopbutton.addEventListener(MouseEvent.CLICK, stopByClick); gobutton.addEventListener(MouseEvent.CLICK, loadByClick); } /* * Observações gerais * Reparem que os métodos que controlam o player são todos disparados usando: player.método() * Isso acontece porque recebemos o conteúdo do loader, ou seja, o player carregado, como objeto, * isso nos permite executar os métodos através da instância desse objeto, ex: player.playVideo(); */ //Play por clique private function playByClick(event:MouseEvent):void { player.playVideo(); } //Pause por clique private function pauseByClick(event:MouseEvent):void { player.pauseVideo(); } //Stop por clique private function stopByClick(event:MouseEvent):void { player.stopVideo(); } //Tratando os eventos do player //Erro private function onPlayerError(event:Event):void { ps.text = "Player error..."; } //Mudança de status private function onPlayerStateChange(event:Event):void { //Informando na caixa de texto o valor referente a chave no dicionário ps.text = sd[Object(event).data]; } //Mundaça de qualidade private function onVideoPlaybackQualityChange(event:Event):void { vq.text = Object(event).data; } //Controlando o Player //Carregando o vídeo private function loadVideo():void { //Definindo o tamanho do player player.setSize(400, 300); //Carregando um vídeo através da ID com qualidade média player.loadVideoById("IthnIUXEEl4", 0, "medium"); //Adicionando um evento para calcular o tempo atual e o carregamento addEventListener(Event.ENTER_FRAME, traceTime); } //Carregando o vídeo ao clique em "Go" private function loadByClick(event:MouseEvent):void { //Parando vídeo atual player.stopVideo(); //Removendo função do evento 'enterFrame' que calcula o tempo removeEventListener(Event.ENTER_FRAME, traceTime); //Carregando um novo vídeo utilizando a ID digitada na caixa de texto //Não foi feito nenhuma função para tratar o campo vazio player.loadVideoById(videoid.text, 0); //Readicionando o evento para calcular o tempo addEventListener(Event.ENTER_FRAME, traceTime); } //Funções auxiiliares //Calculando o tempo e o carregamento private function traceTime(event:Event):void { //Informando o tempo atual actual.text = convertDigits(player.getCurrentTime()); //Informando o tempo total total.text = convertDigits(player.getDuration()); //Informando a quantidade de bytes do vídeo bt.text = String(int(player.getVideoBytesTotal() / 1024) + "Kb"); //Informando o percentual carregado em streamming bl.text = String(int(player.getVideoBytesLoaded()/player.getVideoBytesTotal()*100)+"%"); } //Convertendo o tempo de segundos ex: 190 para minutos e segundos em string 03:10 private function convertDigits(value:Number):String { m = int(value / 60); s = int(value % 60); return addZero(m) + ":" + addZero(s); } private function addZero(value:int):String { if (value <= 9) { rt = String("0" + value); } else { rt = String(value); } return rt; } } } |
Download dos fontes
http://www.flashpedia.com.br/wp-content/plugins/download-monitor/download.php?id=6
Documentação da Youtube AS3 Player API
http://code.google.com/apis/youtube/flash_api_reference.html
O Player está reduzido para caber no corpo do texto, mas nos fontes para download ele está no tamanho correto, dicas, dúvidas e comentários, fiquem a vontade.
Enjoy
***Post publicado também na FlashPedia.com.br
http://www.flashpedia.com.br/2009/10/youtube-actionscript-3-0-player-api/

January 21st, 2010 às 4:45 pm
Opa,
Estou precisando de um player para uma aplicação onde eu contenho o video em meu servidor (player embutido na aplicação, tipo um . Atraves dessa api, eu posso acessar diretamente o diretorio no servidor e fazer o streaming ao cliente (A ideia e acessar o path da imagem, e não um link)? Outra coisa seria se essa API possui deep linking (acesso ao video direto em determinado ponto, simiar ao youtube).
January 28th, 2010 às 1:28 pm
Cara!!! Muito obrigado por esse tutorial, salvou minha vida…kkkkkk!!
Parabens mesmo!! Sucesso e continue ajudando as pessoas.
Seu blog ja está em meus favoritos.
Um abraço.
February 1st, 2010 às 11:10 am
Opa!
Sabe me dizer pq quando utilizo Resize o video some?
Ele começa ok, porem se mecher na tela o video desaparece!
May 6th, 2010 às 8:52 am
amigo, ótimo tuto, mas num to entendendo onde tenho que colocar o meu link do youtube? no exemplo que vc colocou pra baixar tem algum video? valew
August 20th, 2010 às 3:43 pm
Obrigado pela ajuda com o tutorial !!! Abs!