domingo, 1 de setembro de 2013

Javascript : Simples Video Player usando Youtube API

Para quem não sabe, a Google disponibiliza para desenvolvedores uma APi de manipulação para vídeos do Youtube, onde você pode ter uma grande quantidade de opções de controle.

Baseado nessa API, vou disponibilizar aqui um simples player que aceita opções.

Crie um script de nome 'youtube.js' e coloque o seguinte conteudo


// youtube.js
// Aqui é incluido a API em javascript para Youtube.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);

// Aqui é a função que carrega o vídeo.
// 'vid' é o id do video do youtube.
// 'playerid' é o id da tag html que vai rodar o vídeo.
function loadVideo(vid,playerid){

    var player = new YT.Player(playerid, { // O id do player é colocado, passado pelo parâmetro da função.
        height: '390',
     width: '640',
     videoId: vid, // Id do vídeo passado pelo parâmetro.
     playerVars: {
            'autoplay':'1',    // Liga o autoplay.
         'controls':'1',    // Mostra os controles.
         'enablejsapi':'1', // Usa a API javascript.
         'showinfo':'0',    // Esconde as informações de cabeçalho do vídeo.
         'autohide':'1'     // Esconde os controles automaticamente durante a execução (se 'controls' for '1' ).
     },
    });

    return false;

} 

Agora é só seguir o exemplo abaixo:


<DOCTYPE HTML>
<html lang="pt-br">
<head>
Youtube API


</head>
<body>
</body> </html>

A opções em 'playerVars' e seus valores pode ser vistas aqui: https://developers.google.com/youtube/player_parameters#Parameters

O guia de referencia para a API você encontra aqui: https://developers.google.com/youtube/iframe_api_reference