Pinceladas da Web

Alguns dias atrás a uma visita no Snipplr acabei achado um código bem interessante para se trocar URL’s do Youtube na página por player em Flash. Foi com base nesse código então que resolvi montar uma simples galeria de vídeos para explicar aqui e mostrar o funcionamento desse código que é bem simples.

No HTML, basta você passar normalmente as URL’s dos vídeos do Youtube, como no exemplo abaixo:

<p> http://www.youtube.com/watch?v=PzXrAi-dspw </p>
<p> http://www.youtube.com/watch?v=cxl05ijABYk </p>
<p> http://www.youtube.com/watch?v=9UF1Kh4I_Dg </p>
<p> http://www.youtube.com/watch?v=bSsfrgY1Uxg </p>
<p> http://www.youtube.com/watch?v=uacxHSIKDo0 </p>
<p> http://www.youtube.com/watch?v=Iy78nJgRiUM </p>

Agora a responsabilidade é toda do JavaScript, que você pode ver abaixo:

$(function(){
    var vidWidth  = 315; // Largura do video
    	vidHeight = 210; // Altura do video
    	obj       = '<div class="player"><object width="' + vidWidth + '" height="' + vidHeight + '">' +
        '<param name="movie" value="http://www.youtube.com/v/[vid]&amp;hl=en&amp;fs=1"></param>' +
        '<param name="allowFullScreen" value="true"></param>' +
        '<param name="allowscriptaccess" value="always"></param>' +
        '<param name="wmode" value="transparent"></param>' +
        '<embed src="http://www.youtube.com/v/[vid]&amp;hl=en&amp;fs=1" ' +
        'type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" ' +
        'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' +
        vidHeight + '"></embed></object></div>';

    $('#container').find('p:contains("youtube.com/watch")').each(function(){
        var that = $(this);
        var vid = that.html().match(/(?:v=)([\w\-]+)/g);
        if (vid.length) {
            $.each(vid, function(i){
                that.replaceWith( obj.replace(/\[vid\]/g, this.replace('v=','')) );
            });
        }
    });
});

As variáveis vidWidth e vidHeight são utilizadas para largura e altura do nosso player. A variável obj é responsável por montar o nosso player, ela é quem contém o código do object. As coisas começam a ocorrer após a linha 14, dentro da div com o id container, o script procura por todos os parágrafos que contenham o texto youtube.com/watch. Após isso, através de uma expressão regular ele pega o ID do vídeo, limpa todo o HTML encontrado dentro do parágrafo e monta o player.

Como podem ver é bem simples, agora vejam um exemplo funcionando. Se preferir, pode fazer o download dos arquivos utilizados nesse tutorial.