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

6 comentários:

  1. Bom dia.. coloquei para pesquisar api para utilizar com javascript e a primeira que cai foi na sua.. e achei bem interessante para um trabalho que preciso fazer utilizando alguma api... to querendo fazer um video player para rodar no firefox os com um crud de pesquisa.. teria como você me passar como posso pesquisar por nome dos videos? ideia é simples textfield para entrada da pesquisa.. dai listo os videos relacionado e o reproduzo ... obrigado desde já.. abraço

    ResponderExcluir
    Respostas
    1. Olá Angué, que bom que gostou do post.

      Mas para entender a ideia, você quer ao pesquisar o nome de um vídeo, executar cada um dos que foram encontrados na busca e que têm relação com o vídeo atual ?

      Excluir
  2. Como eu posso fazer pra dar Play no vídeo somente quando o usuário clicasse em um link???

    ResponderExcluir
    Respostas
    1. Pedro Rio, no caso você teria de setar o autoplay para 0 e usar uma funcao para ser ativada onclick

      function play(){
      var player = document.getElementById("playerid");
      player.playVideo();
      }

      Excluir
  3. Albert,

    Não sei se a minha pergunta vai ser petinente ou não, estou começando a estudar o Adobe Edge Reflow e estava precisando colocar um player Youtube, você saberia qual a melhor forma para isso?

    ResponderExcluir
    Respostas
    1. Vou ficar devendo amigo, não sei nada de Adobe Edge Reflow.

      Excluir