Youtube ActionScript 3.0 Player API

Geral Adicione um comentário

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 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:

  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.

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/

5 Comentários para “Youtube ActionScript 3.0 Player API”

  1. Ricardo Luiz Disse:

    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).

  2. Marcio Silveira Disse:

    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.

  3. Paulo Disse:

    Opa!

    Sabe me dizer pq quando utilizo Resize o video some?
    Ele começa ok, porem se mecher na tela o video desaparece!

  4. Vagner Silva Disse:

    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

  5. Pedro Ivo Jovelli Disse:

    Obrigado pela ajuda com o tutorial !!! Abs!

Deixe um comentário

RSS Comentários RSS Log in