[Resolvido] [Tutorial] Utilizando a API do Youtube

[Thiago de Oliveira Cruz 21]

Isso é um tutorial ensinando como usar a API do youtube para flash AS 2

 

Para começar eu vou deixar claro que eu não uso todas as funcionalidades da API em meu exemplo pois

acho desnecessário tal utilização.

 

Então vamos lá criem 3 botões (play, pause, stop)

Depois de terem criado os 3 botões Abra a aba de propriedades ctrl + F3

 

Clique sobre o botão e em propriedade vá em instance name e de as intancias:

Play de bt_play

Pause de bt_pause

Stop de bt_stop

 

Feito isso crie uma nova layer(camada) em seu projeto e renomeie para ActionScript e ponha o cadeado

nela para que você não corra o risco de sem querer colocar imagens etc lá.

 

Após ter feito isso clique sobre o frame a abra a janela de ActionScript com F9

Cole o código abaixo:

/** Tutorial usando API do youtube* @author Thiago de Oliveia Cruz*///Assim se meu SWF tiver mais frame não vai sair andandostop();//Crio o MovieClipLoader para eu ter acesso as propriedades do video carregadovar mcl:MovieClipLoader = new MovieClipLoader();//Cria-se o MovieClip que vai receber o player da APIvar player:MovieClip = this.createEmptyMovieClip("player", this.getNextHighestDepth());/** Por problemas de segurança e evitar de ficar recebendo 500 mensagems do mesmo* Adicionamos o System.security.allowDomain para liberar o dominio a ser usado* Isso serve só pra amenizar um pouco as mensagems... não quer dizer que elas vão deixar de aparecer*/System.security.allowDomain("http://www.youtube.com/");System.security.allowDomain("http://www.youtube.com/watch?v=");System.security.allowDomain("http://www.youtube.com/apiplayer");System.security.allowDomain("http://i.ytimg.com/vi/");//Crio meu listenervar obj:Object = new Object();//Adiciono o listener ao MCLmcl.addListener(obj);//Função que ao carregar video ou a api vai instanciar nossos controladoresobj.onLoadInit = function(){	//Seto o video que quero ver	setTimeout( function(){ player.cueVideoById("wUWNT6Aw8Wk", 0, "medium"); }, 1000);}// Botão de playbt_play.onPress = function(){	//Dou play no video	player.playVideo();	//Seto o tamanho do meu player	player.setSize(480, 300);}// Botão de pausebt_pause.onPress = function(){	player.pauseVideo();}// Botão de stopbt_stop.onPress = function(){	player.stopVideo();}//Carrego meu videomcl.loadClip("http://www.youtube.com/apiplayer", player)//Seto os errosplayer.addEventListener("onError", onPlayerError);//Função para mostrar os errosfunction onPlayerError(errorCode:Number) {	trace("Um erro ocorreu: "+ errorCode);}

Bom o que esse código vai fazer é bem simples ele vai carregar a thumbnail de um video e quando você

apertar play ele vai tocar o video... caso contrario ele só fica com a thumbnail lá paradão sem

carregar nada.

 

Agora eu vou explicar para que servem as outras funcionalidades

Functions

player.cueVideoById(videoId:String, startSeconds:Number, suggestedQuality:String)

Para que serve essa função?

 

VideoID

Bom ela pega a ID do video que é obrigatório e puxa a thumbnail do video.

E para que o video funcione você tem de dar playVideo() ou seekTo()

 

StartSeconds

Aqui é o numero inicial que seu video deve começar, você deve passar o valor em segundos para

essa função.

 

SuggestedQuality

Bom aqui é a qualidade sugerida por você para o video elas são 5

 

* Qualidade de nivel baixo "small": Player com resolução menor que 640px por 360px.

* Qualidade de nivel médio "medium": Player com resolução minima de 640px por 360px.

* Qualidade de nivel grande "large": Player com resolução minima de 854px por 480px.

* Qualidade de nivel HD "hd720": Player com resolução minima de 1280px por 720px.

* Qualidade de nivel default: YouTube vai selecionar qual a melhor qualidade para seu player.

 

 

player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String)

Exatamente a mesma coisa que a anterior, só que com essa ele já inicia o Player automaticamente sem

precisar dar play em nada.

 

 

 

player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number)

Mesma coisa que a primeira só que nessa funcão você precisa passar a URL completa do video

como por exemplo: http://www.youtube.com/watch?v=VIDEO_ID

E não tem a propriedade de qualidade para que você possa escolher

E mesmo assim preisa dar player.playVideo() para que ele inicie ou player.seekTo(Time:Number);

 

 

 

player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number)

Essa aqui é a mesma coisa que a loadVideoById só que como na anterior precisa passar a url completa

http://www.youtube.com/watch?v=VIDEO_ID para que ele funcione.

 

 

Propriedades acessiveis do video:

 

 

player.playVideo() Toca o video desejado ao mandar essa função

player.stopVideo() Da um stop total no video voltando ele para o 0

player.pauseVideo() Pausa o video no estado que ele se encontra

 

player.seekTo(seconds:Number, allowSeekAhead:Boolean)

Seconds Vai para a posição desejada em segundos

AllowSeekAhead true para habilitar que se possa buscar mais informação na frente antes de estar

carregado e false para que não permita essa função

 

Mudando o volume

player.mute() tira o som completamente do player

player.unMute() volta o som do player

player.isMuted() verifica se o player está mudo ou não retorna true ou false

player.setVolume(valor) vai de 0 a 100 para setar o volume

player.getVolume() Mostra o volume atual

 

Mudando o tamanho

Para mudar o tamanho não muda muita coisa do que o comando comum de player padrão do flash

player.setSize(largura, altura)

 

Pegando o status

Para pegar as informações do video como bytesLoaded, bytesTotal essas coisas o youtube também tem

player.getVideoBytesLoaded() Retorna o numero de bytes carregado

player.getVideoBytesTotal() Retorna o numero de bytes total

player.getVideoStartBytes() Retorna o numero de bytes da onde o video começou a tocar, caso

você por exemplo tenha utilizado o seekTo ou passado por parametros qual segundo começar do video

 

player.getPlayerState() Retorna a posição atual do player

-1 não inciou

0 finalizado

1 tocando

2 pausado

3 fazendo buffer

5 Videos em fila

 

player.getCurrentTime() Retorna o tempo corrido do video

 

Setando qualidade e Pegando a qualidade existente

Bom para pegar a qualidade do video utilizamos:

player.getPlaybackQuality()

Que retorna:

small, medium, large, hd720 ou default.

 

Para setar utilizamos:

player.setPlaybackQuality(suggestedQuality:String)

E usamos uma das medidas acima citadas.

 

player.getAvailableQualityLevels()

Retorna uma array das qualidades disponiveis para aquele video

 

Pegando informações

player.getDuration()

Pega a duração do video.

*Nota esse valor vai se manter em zero, até o video carregar o MetaData do video, que só acontece

depois depois dele já tiver inciado

 

player.getVideoUrl()

Retorna a url do youtube referente ao video

 

player.getVideoEmbedCode()

Retorna o código embed do youtube referente ao video

 

player.addEventListener(event:String, listener:Function)

Adiciona eventos ao video do tipo onerror e onStatus por exemplo

 

Funções especiais

player.isPlayerLoaded()

Verifica se o player foi carregado e pronto para fazer a API funcionar

Retorna true ou false

 

player.destroy()

 

Ela destroi as informações do player, deve ser utilizada antes de descarregar o video do SWF

*IMPORTANTE:

Você sempre deve chamar essa função ao acabar o video, ou antes de descarregar o video para que o

mesmo não carregue informações desnecessárias para o seu site ou SWF.

 

Eventos

Eventos devem ser chamados como addEventListener como citado um pouco mais acima.

 

Eventos disponiveis:

onReady Quando o video ta pronto para ser tocado

onStateChange Quando é mudado o estado do video

-1 não inciou

0 finalizado

1 tocando

2 pausado

3 fazendo buffer

5 Videos em fila

 

onPlaybackQualityChange Quando for setada uma nova qualidade ao video

onerror Quando causar algum erro no carregamento dos dados do video

 

 

Bom isso é só, para aqueles que entedem inglês e queiram ver as informações do proprio site do

youtube para maiores informações sobre essa API

ActionScript 2: http://code.google.c...erence_as2.html

ActionScript 3: http://code.google.c..._reference.html

 

 

Bom acredito que seja só

 

Até o proximo tutorial

Qualquer dúvida ou sugestões sintam-se a vontade para postar.

 

PS: Esse tutorial basicamente foi traduzido do site do youtube

 

Abraços