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
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.
Update em 24/10 – Barra de Seek e URL e Embed Codes
Alterando pequenas partes da Document Class que controla o player e fazendo o bom uso dos métodos que retornam valores e alguma matemática podemos personalizar também a barra de seek/progress do player.
Também foi alterado o método que inicia o vídeo, para este update eu utilizei o método cueVideoById() que prepara o vídeo inclusive carregando a miniatura dele para a execução e só inicia após o seek ou play.
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 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 | 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; import flash.desktop.Clipboard; import flash.desktop.ClipboardFormats; /** * 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; //boleano que informa se está ocorrendo seek private var seeking:Boolean = false; //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); } //Carregando o player private function loadPlayer(event:Event):void { //removendo o evento para início do filme removeEventListener(Event.ADDED_TO_STAGE, loadPlayer); //configurando o ambiente configure(); //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; seekbar.tracker.buttonMode = true; urlbutton.buttonMode = true; embedbutton.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); //Adiciona a função de seek ao tracker de progresso seekbar.tracker.addEventListener(MouseEvent.MOUSE_DOWN, seekStart); seekbar.tracker.addEventListener(MouseEvent.MOUSE_UP, seekDragStop); //Adiciona a função que copia a url ou o embed code para a área de transferência urlbutton.addEventListener(MouseEvent.CLICK, copyUrl); embedbutton.addEventListener(MouseEvent.CLICK, copyEmbed); } /* * 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(); } //SeekStart adiciona um evento "mouse_move", que caso o mouse esteja numa posição menor que //a escala da barra de progresso de download do vídeo, permita que ele faça o seek private function seekStart(event:MouseEvent):void { seeking = true; event.target.addEventListener(MouseEvent.MOUSE_MOVE, seekDrag); } //SeekDrag posiciona o cursor sobre a barra de progresso para o seek private function seekDrag(event:MouseEvent):void { //se a posição for menor que a escala da barra de download o tracker segue if (seekbar.mouseX <= int(player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 100) * 400 / 100) { event.target.x = seekbar.mouseX; } //se não o tracker volta a posição atual de execução else { event.target.removeEventListener(MouseEvent.MOUSE_MOVE, seekDrag); seeking = false; } } //SeekStop encerra o arraste ao soltar do mouse private function seekDragStop(event:MouseEvent):void { player.seekTo(int((event.target.x / 400 * 100) * player.getDuration() / 100 ), false); seeking = false; } //Copiando a url para a área de transferência private function copyUrl(event:MouseEvent):void { Clipboard.generalClipboard.clear(); Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, player.getVideoUrl()); clip.text = "Video URL copied..."; } //Copiando o embed code para a área de transferência (ele só é retornado após a segunda mudança de estágio) private function copyEmbed(event:MouseEvent):void { Clipboard.generalClipboard.clear(); Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, player.getVideoEmbedCode()); clip.text = "Embed Code copied..."; } //Tratando os eventos do player //Erro private function onPlayerError(event:Event):void { ps.text = Object(event).data; } //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"); player.cueVideoById("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) + "%"); //Calculando a escala da barra de progresso do download do vídeo if (isNaN(player.getVideoBytesLoaded() / player.getVideoBytesTotal())) { seekbar.loadedbar.scaleX = 0; } else { seekbar.loadedbar.scaleX = player.getVideoBytesLoaded() / player.getVideoBytesTotal(); } //Movendo o tracker conforme o progresso da execução (se não estiver arrastando) !seeking ? seekbar.tracker.x = int(player.getCurrentTime() / player.getDuration() * 100) * 400 / 100 : void; } //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); } //adicionando Zero 1 -> 01 private function addZero(value:int):String { value <= 9 ? rt = String("0" + value) : rt = String(value); return rt; } } } |
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.
Para ver uma versão em 100% do player, clique aqui.
Download dos fontes
Exemplo da Youtube ActionScript3 Player API
Baixado 937 vezes
Tamanho 544.51 KB
**Para a utilização dos botões de url e embed é necessário o Flash Player 10 instalado.
Enjoy ;)

em 20 de outubro de 2009
Incafufado vim conferir se havia algum post aqui, então a surpresa.
Parabens, agora funfou!
em 20 de outubro de 2009
bom!
nao consegi abrir o arquivo youtubeas3api.rar com winrar. quebrou?
obrigado
–
Markus
em 20 de outubro de 2009
Olá Markus, obrigado pelo FeedBack, o link já está corrigido, parece que o plugin de download não está funcionando, coloquei o link direto.
em 20 de outubro de 2009
Show cara!
Um dia desses vou fazer meus testes
em 23 de outubro de 2009
Táquipariu, Eder , mandou benzaço com o tuto!
em 24 de outubro de 2009
o.o Perfeito tutorial, e com uma api tão simples de ser utilizada, usufluir dos recursos que um acesso facil ao youtube pode privilegiar a um website, é demais \o
tks eder :)
em 26 de outubro de 2009
ficou supimpa!! (Y)
e ficaria mais com o mesmo video q vc colocou no seu blog :P huhu
em 7 de novembro de 2009
O link que você passou cai na no AS2 e não consigo encontrar do AS3…
em 7 de novembro de 2009
Deu certo, se você está com o idioma em português aparece a do AS2. Mas se está em inglês, aparece a do AS3!
Muito bom o tutorial, vou usá-lo! Obrigado.
em 11 de novembro de 2009
Excelente. Muito bom mesmo, estava procurando tem tempo. A dúvida agora é na hora de tocar um outro, estava fazendo em xml, mas em AS3 eu não to conseguindo fazer funcionar.
Seria uma lista de vídeos do youtube para tocar no player. Alguém sabe?
Abçs…
em 11 de novembro de 2009
Newton, a melhor forma de você fazer uma lista de vídeos carregada diretamente do youtube é usando a Data API (http://code.google.com/apis/youtube/2.0/developers_guide_protocol_audience.html).
Com ela você consegue listar vídeos, buscar, listar playlists entre outros.
Uma lista xml simples, criada por você seria basicamente criar botões a partir do xml, indexando a id do vídeo e usar o método apresentado no exemplo cueVideoById() informando como parâmetro da função o id do vídeo, tratado por você em cada botão através do xml.
Qualquer formato de menu com xml em as3 se adapta perfeitamente a esse player.
=)
em 30 de novembro de 2009
Se quiser usar os controles default do Youtube, como fica?
em 8 de dezembro de 2009
D+, JUSTAMENTE O QUE PROCURAVA…. GOSTARIA DE SABER SE EXISTE A POSSIBILIDADE DE LISTAR AO LADO UMS SEQUENCIA DE ID\’S…TIPO
kxcUWdhr0_I
wRcuS7Juio8
ENTÃO CLICA-SE NO ID e o video vai trocando.
em 22 de dezembro de 2009
Henrique, desculpe a demora pra responder.
Para utilizar o player padrão, você pode consultar a mesma documentação, em as2 é basicamente carregar o endereço http://www.youtube.com/v/iddovideo, em as3 um colega esteve me perguntando, mas ainda não li nada sobre.
Assim que eu encontrar eu deixo a resposta aqui.
:)
em 8 de janeiro de 2010
Caraaa! Ótimo isso! Tava procurando há umas duas ou três semanas. ahuia
O problema é o seguinte: eu to tentando dar \’loadmovie\’ desse swf, mas, ao fazer isso, eu perco todas as funções do player. O meu site está sendo feito em AS2… é por causa disso? Se for, foi encontrada alguma solução parecida pra as2?
http://igiotel.com.br/TESTE/youtube.swf
http://igiotel.com.br/TESTE/Youtube.as
http://igiotel.com.br/TESTE/Clientes.swf
http://igiotel.com.br/TESTE/Index.html
abraaços.
em 13 de janeiro de 2010
Olá Assis.
Sim, você não vai conseguir fazer o player funcionar carregando dentro de um site em As2, porque a máquina (runtime) não permite.
Ao invés disso, tente usar a Api 2.0, que funciona com ActionScript 2, o link da documentação do youtube mesmo tem ensinando, é bem simples.
Abraço
em 23 de janeiro de 2010
salve, existe alguma forma de colocar o video em FullScreen ? alguma coisa relacionada ao AspectRatio ?
abs e parabéns pelo artigo.
em 12 de fevereiro de 2010
Cara… como eu faço pra tocar o Video????
em 28 de março de 2010
Excelente… só falto explicar como altera o volume do video :|
em 9 de junho de 2010
Olá Eder, estou usando sua API pra poder fazer um player, mas a barra de seek não está funcionando, então estou disponibilizando o FLA pra q tu possa ler e se possível me ajudar, pois falta pouco pra terminar esse meu site.
arquivo : http://www.mediafire.com/?tumnw4admwd
Obrigado
FLA: