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
{
//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.
//-----------------------------------------------------------------
//-----------------------------------------------------------------
// 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;
}
