Acesse o painel administrativo de seu site :     
Login :
Senha :
 
A  A  A
Player do Youtube no Flash usando a API

Insira videos do youtube no seu site flash ou crie um com player personalizado para páginas html, utilizando a API fornecida pelo Youtube.  Código fonte em AS2 comentado e download do arquivo FLA.

Videos do Youtube em sua página são extremamente recomendáveis, pois como os videos ficam hospedados no servidor do youtube não geram tráfego em seu servidor diminuindo assim os custos de manutenção.
Além disso são uma grande fonte de divulgação pois o Youtube é hoje praticamente um "Canal de TV" alternativo, sendo utilizado largamente para pesquisas, aprendizados ou simplesmente para entretenimento.

Com este tutorial você poderá personalizar seu player  criando o design que você quiser e adicioná-lo em suas páginas flash ou html. Foi desenvolvido em AS2 pois assim poderá ser importado em sites que utilizam AS3, já o contrário não seria possível.

 

Segue abaixo o código-fonte comentado e o link para download do arquivo aberto FLA :

 

Caso seu site esteja hospedado em nosso servidor, o conteúdo poderá ser inserido pelo painel administrativo, gerando os botões com os links automaticamente pelo sistema.

 

 

►  Insira a Url do video do Youtube ( o sistema irá tratar e pegar o id do video automaticamente)

► Digite o Nome do Video (opcional)

► Digite uma descrição para o video (opcional)

► Clique em Enviar

 O sistema irá tratar a url pegando o id do vídeo e inserir os botões ou imagens com links para os videos automaticamente.

Ex: www.djjulinhocwb.com.br   no link Videos

 

 

 

video1Btn.onRelease=function()
{
        //pegue apenas a id do video que fica após 'v='
        //http://www.youtube.com/watch?v=l6oiADjOdFg
       
        ytplayer.loadVideoById("l6oiADjOdFg", 0);
}
video2Btn.onRelease=function()
{
        ytplayer.loadVideoById("F4OXrmxDp44", 0);
}
//----------------------------------------------------------------
//
//  CONFIGURAÇÕES
//
//-----------------------------------------------------------------
var larguraVideo = 593;
var alturaVideo  = 361;
 
 
//-----------------------------------------------------------------
//
//  Daqui em diante não há necessidade de alterar nada.
//  Mas caso queira fazer algumas modificações segue o código
//  comentado.
//
//-----------------------------------------------------------------
 

//-----------------------------------------------------------------
// configura as dimensões do player e controles de acordo com as dimensões do video
//-----------------------------------------------------------------
        borda._width = larguraVideo+4;
        borda._height = alturaVideo+4;
        bgPlayer._width = larguraVideo;
        bgPlayer._height = alturaVideo;
        controls._y = bgPlayer._y + alturaVideo;
        controls.bgControls._width = larguraVideo+4;
        controls.seekbar._width = larguraVideo-100;
//-------------------------------------------------------------------

//zera o tamanho da barra de progresso
controls.seekbar.progressBar._xscale = 0;


//--------------------------------------------------------------------
//
//  CARREGA A API
//
//---------------------------------------------------------------------
System.security.allowDomain("youtube.com","http://youtube.com", "www.youtube.com","8.7.217.31");

//define as variáveis
ytPlayerLoaderListener = {}; // variavel que será utilizada no loader
var loadInterval:Number; // variavel que será utilizada no intervalo de tempo

//cria um novo loader
ytPlayerLoader = new MovieClipLoader();
//adiciona um ouvinte ao loader
ytPlayerLoader.addListener(ytPlayerLoaderListener);
//carrega o player do Youtube no loader
ytPlayerLoader.loadClip("http://www.youtube.com/apiplayer", ytplayer);

ytPlayerLoaderListener.onLoadInit = function()
{
   //intervalo de tempo para o carregamento
   loadInterval = setInterval(checkPlayerLoaded, 250);
       
}

//verifica se o player foi carregado
function checkPlayerLoaded():Void
{
   //se o player foi carregado...
   if (ytplayer.isPlayerLoaded())
        {
        //adiciona os ouvintes para mudança de estado e erro
                ytplayer.addEventListener("onStateChange", onPlayerStateChange);
        ytplayer.addEventListener("onError", onPlayerError);
                //esconde o indicador de carregamento
        loadIndicator._visible = false;
                //limpa a variavel de intervalo de tempo
        clearInterval(loadInterval);
                //seta as dimensões do player
                //estas são as dimensões do player que foi carregado do Youtube. Não seta as dimensões do skin que você criou
                //para isso foi criada a função no início deste script que calcula as dimensões do skin baseado nas dimensões do player
                ytplayer.setSize(larguraVideo,alturaVideo);
    }
}


//-----------------------------------------------------------------------
// função do botão Play
//-----------------------------------------------------------------------
controls.playBtn.onRelease=function()
{
        ytplayer.playVideo();
}

//------------------------------------------------------------------------
// função do botão Pause
//------------------------------------------------------------------------
controls.pauseBtn.onRelease=function()
{
        //pausa o video
        ytplayer.pauseVideo();
}

//-------------------------------------------------------------------------
// função do botão Stop
//-------------------------------------------------------------------------
{
        //para a execução do video
        ytplayer.stopVideo();
        // recarrega o player que irá aguardar a nova url
        ytPlayerLoader.loadClip("http://www.youtube.com/apiplayer", ytplayer);
        //zera o tamanho da barra de progresso
        seekbar.progressBar._xscale = 0;
}              
       
//--------------------------------------------------------------------------
// especificações das Barras de Progresso e Carregamento
//--------------------------------------------------------------------------
_root.onEnterFrame = function()
{
        // calcula a posição da barra de progresso
        controls.seekbar.progressBar._xscale = (ytplayer.getCurrentTime()/ ytplayer.getDuration())*100;
        // calcula a posiçao da barra de carregamento
        controls.seekbar.loadBar._xscale = (ytplayer.getVideoBytesLoaded()/ ytplayer.getVideoBytesTotal())*100;
}
 
 
 
 
 

Comentários  

 
0 #5 Rudinei Alves 09-12-2011 15:16
O importante não é a versão do Flash e sim do ActionScript que você está definindo no projeto, neste caso action script 2.
Quanto à instanciar os botões, no exemplo acima estão sim instanciados, mas vc pode (em as2) inserir as ações no próprio botão e aí não é necessário instanciar.
Os demais (loader e listeners) devem ser instanciados pois são criados dinamicamente - ex: ytPlayerLoader = new MovieClipLoader ()
Citar
 
 
0 #4 Anderon 09-12-2011 15:05
Amigo, eu uso o flash MX 2004 versao 7.0.
Mas tenho uma duvida quanto se devo instanciar tudo, os botoes, o loader... e gostaria se possivel que me respondesse se tenho que criar uma layer apenas pro loader e instancia-lo e se o ouvinte tb tem que ser criado um objeto e intancioa-lo?... grato
Citar
 
 
0 #3 eudes lopes 18-07-2011 20:39
rudinei, valeu pela resposta mas nao consegui o resultado desejado. se possivel da um exemplo.
Citar
 
 
+1 #2 Rudinei Alves 16-07-2011 06:58
Eudes, adicione 'ytplayer.loadVideoById("id_do_video", 0);' na função 'checkPlayerLoad ed()' após a verificação se o player foi carregado.
Citar
 
 
0 #1 eudes lopes 15-07-2011 18:02
muito bom achei o q estava procurando, gostaria de saber como fazer para o video começar automaticamente sem o usuario precisar clicar em nada
Citar
 

Adicionar comentário


Código de segurança
Atualizar

 
 

Design

Serviços Gráficos

Uma arte que não é idealizada desde o início visando a produção final, certamente resultará em um produto de baixa qualidade. Para que seu impresso tenha qualidade na produção final, é necessário atenção à diversos fatores de pré-produção que abrangem desde criação da a...

Saiba mais ...

Hospedagem

Principais vantagens

Hospedagem em modernos servidores com garantia de 99% de uptime. 5 GB de espaço em disco 30 GB de tráfego 10 Contas de email Painel administrativo com gerenciador de conteúdo exclusivo NWD Net Suporte diretamente com nossa equipe via msn ou telefone PARA DESENVOLVEDORES INTEGRAÇÃO DE SITES FLASH + XML COM O PAINEL ADMI...

Saiba mais ...

Programação

Modelos CMS
São sites e sistemas modelados à partir de uma completa e bem estruturada base de programação.  Apesar de utilizarem a mesma programação base os sistemas são acrescidos de funções e design personalizados gerando um produto final exclusivo para cada cliente.   PRINCIPAIS VANTAGENS DO USO DE CMS - Baixo custo em rel...
Saiba mais ...