Como fazer uma playlist do youtube com javascript

*http://www.youtube.com/watch?v=rHyDH6f1kLo&feature=c4-overview&list=UUEWHPFNilsT0IfQfutVzsag
http://www.youtube.com/watch?v=4WryP4KxHaU
http://www.youtube.com/watch?v=Un4r52t-cuk&list=TLVVWYCTldZxA
http://www.youtube.com/watch?v=wV3vGWcca3U&list=TLVVWYCTldZxA
http://www.youtube.com/watch?v=_FsgWrAJObM
http://www.youtube.com/watch?v=ykgZvSzcuDk

Pra quem não viu ontem, criei um javascript que cria um playlist de vídeos do youtube de maneira parecida com a deles... Pra isso utilizei javascript, YQL e o API de vídeos do youtube, além de muita paciência...rs

Na verdade ainda tem algumas melhoras a se fazer, como identificar o fim de cada vídeo e iniciar o próximo automaticamente, ajustar melhor o tamanho do player e centralizá-lo na tela...
Mas de qualquer forma resolvi compartilhar com vocês o código que fiz ontem à noite.

Na verdade esse código já foi modificado hoje, pois nesse blog dinâmico o javascript sempre acaba tendo que ser modificado para funcionar...
O que posso citar de principal modificação é a volta à fila, pois há falha no carregamento dos dados algumas vezes, outra coisa é que ocultei o iframe enquanto a playlist é carregada, pois tava dando um pau que localmente não deu...
Além disso no CSS, tive que colocar !important na frente de tudo, porque o blog tem muitos estilos diferentes do default e se não colocar isso os estilos não são obedecidos.

CSS

O primeiro código deve ser colocado entre as tags <head></head>, aqui é definido as cores do playlist, pode modificar à vontade pra atender suas necessidades.

O código javascript

O segundo código é de colocar entre as tags head, ou antes do </body>, no final da página...

<script>
////a primeira função é para mudar o vídeo que está sendo executado pelo que foi clicado na playlist
function vplay(id,n){
document.getElementById('list'+n).innerHTML=document.getElementById('list'+n).innerHTML.replace("selected","");
document.getElementById('player'+n).src='//www.youtube.com/embed/'+id+'?autoplay=1';
document.getElementById(n+'_'+id).className='selected';
}
///nota: não há checagem se o vídeo que foi clicado na playlist é o mesmo que está sendo executado, então o vídeo será recarregado.

//Essa função recebe e interpreta o resultado vindo da solicitação por xmlhttp
function ready(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
xmlDoc6=xmlhttp.responseText;
s0=xmlDoc6.split('<title type="text">');
//O resultado recebido será um documento xml com título, duração e views do vídeo, em s0 começará a interpretação do xml, começando a pegar o título, no if seguinte será testado se o arquivo foi carregado corretamente e se foi encontrado o título
if(s0.length>1){
//Caso o título seja encontrado a interpretação do xml continua, extraindo os views e a duração do vídeo, convertendo de segundos pra minutos.
s1=s0[1].split('</title>');
titulo=s1[0];
s0=xmlDoc6.split('seconds="');
s1=s0[1].split('"');
tempo=(s1[0]/60).toString().split(".");
if(tempo.length==1){tempo[1]="00";}
tempo=tempo[0]+':'+tempo[1].substr(0,2)+' minutos';
s0=xmlDoc6.split('viewCount="');
s1=s0[1].split('"');
views=s1[0];
//O javascript procura no documento o elemento da id de vídeo da playlist n, e depois escreve dentro dela as informações obtidas anteriormente
document.getElementById(xmlhttp.n+'_'+xmlhttp.id).innerHTML='<a href="javascript:vplay(\''+xmlhttp.id+'\','+xmlhttp.n+');void(0);" style="display:block"><img src="http://i4.ytimg.com/vi/'+xmlhttp.id+'/default.jpg" align="left"><span class="videotitle">'+titulo+'</span><br>'+tempo+'<br>'+views+' views</a>';
}else{
//Caso não seja encontrado o título do vídeo, ele é adicionado em primeiro lugar na fila de carregamento, pra garantir que seja carregado.
window.fila.splice(0,0,Array(xmlhttp.id,xmlhttp.n));
}
if(window.fila.length>0){
//Enquanto houver fila de carregamento, é executada a função de carregar o próximo vídeo da playlist
loadeget();
}else{
//Quando não houver mais fila de carregamento o iframe com o primeiro vídeo a ser executado é exibido
document.getElementById('player'+xmlhttp.n).style.display="block";
}
}
}

//Essa função inicia a solicitação xmlhttp, retirando o primeiro elemento da fila de carregamento e executando o API do youtube com o YQL
function loadeget(){
f=window.fila[0];
id=f[0];
n=f[1];
window.fila.splice(0,1);
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",'//query.yahooapis.com/v1/public/yql?q=select%20title,group.duration,statistics.viewCount%20from%20xml%20where%20url=%22http://gdata.youtube.com/feeds/api/videos/'+id+'?r='+Math.random()+'%22',true);
xmlhttp.onreadystatechange = ready;
//O id do vídeo e o número da playlist(n) é passado como atributo no xmlhttp
xmlhttp.id=id;
xmlhttp.n=n;
xmlhttp.send();
}

//Essa função é responsável por identificar os elementos div que tem a classe youtube_playlist e transforma-os em playlists
function yt_playlist(){
n=0;
indicador="*"; //Colocado na frente do link do vídeo esse indicador mostrará qual vídeo será o primeiro a executar
player_width=320; //Largura do player
player_height=266; //Altura do player e da playlist
breaker="<br>"; //Colocado no fim de cada link marca o fim do link atual e o começo de um novo link
divs=document.getElementsByTagName("div");
for(i52=0;i52<divs.length;i52++){
if(divs[i52].className=="youtube_playlist"){
//Acaba de ser identificado um elemento playlist, ela terá seu conteúdo dividido nos breakers, para identificar os vídeos que estão neste playlist, após isso conteúdo desse div será modificado para o layout do playlist
videos=divs[i52].innerHTML.split(breaker);
divs[i52].innerHTML='<iframe id="player'+n+'" class="player" width="'+player_width+'" height="'+player_height+'" src="" frameborder="0" allowfullscreen style="display:none"></iframe> <div id="list'+n+'" class="playlist" style="height:'+player_height+'px"></div>';
for(j20=0;j20<videos.length;j20++){
if(videos[j20].search("<")==-1 && videos[j20].search("v=")!=-1){
playing=videos[j20].charAt(1)==indicador;
video_id=videos[j20].split("v=")[1].split("&")[0].replace(new RegExp( "\\n", "g" ),"");
if(playing){document.getElementById('player'+n).src="//www.youtube.com/embed/"+video_id;} //É identificado que o vídeo tem o indicador na sua frente, isso o colocará no src do iframe
//O elemento da fila de carregamento constitui-se por id e o numero da playlist, esse n é necessário pois pode haver o mesmo vídeo em diversas playlists, e o id de identificação do elemento não pode ser duplicado, então como na mesma playlist não haverão vídeos repetidos, identificar os elementos com o número da playlist e o id do vídeo é o suficiente para torná-lo único
//note que o id do elemento que está sendo adicionado a lista da playlist será n_id, mas seu conteúdo está vazio, isso acontece porque seu conteúdo será carregado depois pelo API do youtube
document.getElementById('list'+n).innerHTML+='<div id="'+n+'_'+video_id+'" '+(playing?'class="selected"':'')+'></div>';
//O vídeo é adicionado a fila de carregamento, isso é necessário pois não se pode carregar mais de um ao mesmo tempo com a mesma função, logo é criado uma fila e a fila vai sendo atendida conforme os xml's dos vídeos forem sendo carregados
window.fila[window.fila.length]=Array(video_id,n);
}
}
//Acabou a reestruturação desse elemento div, a playlist está pronta pra ser usada, é adicionado +1 ao identificador de playlists(n) e é adicionado modified na classe da playlist modificada, pra evitar que ela seja modificada novamente, causando erros, em uma nova passagem da função
n++;
divs[i52].class=divs[i52].className="youtube_playlist modified";
}
}
//Depois que todas as playlists estiverem prontas só falta atender a fila e carregar os dados dos vídeos, títulos, duração e views, então é chamada a função responsável por isso.
loadeget();
}
window.fila=Array();
</script>

Como usar? "3º código"

Pra usar é bem mais simples, é só você colocar os 2 códigos anteriores entre as tags <head></head>, como foi explicado, e quando quiser inserir uma playlist no seu site você insere os links dentro de uma tag com a classe youtube_playlist, dessa forma:

*http://www.youtube.com/watch?v=rHyDH6f1kLo&feature=c4-overview<br>

http://www.youtube.com/watch?v=4WryP4KxHaU<br>

http://www.youtube.com/watch?v=Un4r52t-cuk&list=TLVVWYCTldZxA<br>

http://www.youtube.com/watch?v=wV3vGWcca3U&list=TLVVWYCTldZxA<br>

http://www.youtube.com/watch?v=_FsgWrAJObM<br>

http://www.youtube.com/watch?v=ykgZvSzcuDk</div>
<div style="clear:both"> </div>

Após esse código insira o código javascript pra transformar em playlist.

Observações:

O div com clear:both acaba com o float:left, impedindo que o texto fique a direita da playlist e vá para baixo dele
Note que os links são no formato v=id_do_video, urls encurtadas não funcionarão, precisará modificar o javascript
Note que o <br> separa os vídeos e que no último vídeo não há <br>, sim </div> pra marcar o final da div playlist, não pule linha pra finalizar a div, finalize na frente do link do último vídeo.
Se houver mais de uma playlist na mesma página é recomendável chamar o javascript pra transformar em playlist após a última playlist ou então no fim do documento antes do </body>

Pesquisar este blog

Como Fazer "Certo"