leitura do artigo >

20
out

Youtube ActionScript 3.0 Player API

O Youtube lançou recentemente a versão 3.0 da sua Player API trazendo não só melhorias mas uma agilidade maior no desenvolvimento de serviços que utilizem a plataforma Flash e ActionScript 3.0, acompanhe e veja como é simples interagir com a nova API
Update em 24/10: Barra de progresso e seek, url e embed codes

Comentários (3) Comentários(20) Categorias Action Script3, HowTo, IDEs e APIs

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

Se você não estiver visualizando o player você precisa atualizar sua versão do Flash Player, a versão atual é a 10

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:

  1. onReady” – É o evento que o player dispara quando está devidamente carregado e configurado no ambiente;
  2. onStateChange” – É o evento disparado em toda mudança de status da reprodução como ‘play’, ‘pause’, ‘buffer’, etc;
  3. onPlaybackQualityChange” – É o evento disparado sempre que é alterada a opção de qualidade do vídeo, que pode ser feita a qualquer momento;
  4. 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
Clique para fazer o download

**Para a utilização dos botões de url e embed é necessário o Flash Player 10 instalado.

Enjoy ;)

Postado em 20-10-2009 por Eder Lima
em Action Script3, HowTo, IDEs e APIs

Share/Save/Bookmark

Comentários

  • Pedro Lins disse:
    em 20 de outubro de 2009

    Incafufado vim conferir se havia algum post aqui, então a surpresa.

    Parabens, agora funfou!

  • Markus Wehr disse:
    em 20 de outubro de 2009

    bom!

    nao consegi abrir o arquivo youtubeas3api.rar com winrar. quebrou?

    obrigado

    Markus

  • Eder Lima disse:
    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.

  • Marcelo Schreiber disse:
    em 20 de outubro de 2009

    Show cara!

    Um dia desses vou fazer meus testes

  • Álvaro Gomides disse:
    em 23 de outubro de 2009

    Táquipariu, Eder , mandou benzaço com o tuto!

  • Rodrigo Lucas - Ne disse:
    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 :)

  • Igor Amendola disse:
    em 26 de outubro de 2009

    ficou supimpa!! (Y)
    e ficaria mais com o mesmo video q vc colocou no seu blog :P huhu

  • idemax disse:
    em 7 de novembro de 2009

    O link que você passou cai na no AS2 e não consigo encontrar do AS3…

  • idemax disse:
    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.

  • Newton disse:
    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…

  • Eder Lima disse:
    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.
    =)

  • Henrique disse:
    em 30 de novembro de 2009

    Se quiser usar os controles default do Youtube, como fica?

  • RABIN disse:
    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.

  • Eder Lima disse:
    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.
    :)

  • Assis disse:
    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.

  • Eder Lima disse:
    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

  • Lucas Marçal disse:
    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.

  • Junior disse:
    em 12 de fevereiro de 2010

    Cara… como eu faço pra tocar o Video????

  • Joe disse:
    em 28 de março de 2010

    Excelente… só falto explicar como altera o volume do video :|

  • Ramiro disse:
    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:

 Escreva um Comentário

Seu nome

E-mail (não será publicado) (obrigatório)

Website

Comente

Spam protection by WP Captcha-Free