Pular para o conteúdo principal

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

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

Postar um comentário

Postagens mais visitadas deste blog

Javascript : Converter sigla de estados em nome de estados

Esse é um switch prático pra quem precisa converter as siglas dos estados brasileiros nos seus respectivos nomes. Dado uma variável 'UF' com a sigla, vamos salvar em 'ESTADO' o nome correspondente: switch(UF){ case 'AC': ESTADO = 'Acre'; break; case 'AL': ESTADO = 'Alagoas'; break; case 'AP': ESTADO = 'Amapá'; break; case 'AM': ESTADO = 'Amazonas'; break; case 'BA': ESTADO = 'Bahia'; break; case 'CE': ESTADO = 'Ceará'; break; case 'DF': ESTADO = 'Distrito Federal'; break; case 'ES': ESTADO = 'Espírito Santo'; break; case 'GO': ESTADO = 'Goiás'; break; case 'MA': ESTADO = 'Maranhão'; break; case 'MT': ESTADO = 'Mato Grosso'; break; case 'MS': ESTADO = 'Mato Grosso do Sul'; break; case 'MG': ESTADO = 'Minas Gerais&

PHP : array de estados brasileiros com nomes e siglas

Esse é um simples array com os nomes dos estados e suas correspondentes siglas. Cada estado é um array numerado e e "bem comportado" : tudo em minúsculas e sem acentos, porque evita problemas de compatibilidade de codificação e você sempre pode usar um "strtoupper", "ucfirst" e "ucwords" do PHP para tratar a formatação. $estados = array( 1=>array("sigla"=>"ac","nome"=>"acre"), 2=>array("sigla"=>"al","nome"=>"alagoas"), 3=>array("sigla"=>"am","nome"=>"amazonas"), 4=>array("sigla"=>"ap","nome"=>"amapa"), 5=>array("sigla"=>"ba","nome"=>"bahia"), 6=>array("sigla"=>"ce","nome"=>"ceara"), 7=>array("sigla"=>"df","nome"=>&q

Criando um repositorio GIT de forma fácil e rápida

Para se criar um servidor central git para salvar seus  projetos e compartilhar com outros desenvolvedores, tenha uma máquina rodando um servidor ssh  e um dominio. Caso a máquina so faça compartilhamento num rede interna, basta ter em mãos o ip dela. Configure os usuários e grupos com permissão de acesso a máquina e tenha certeza que todos conseguem acessar via ssh nela. Como exemplo, aqui o usuário será 'user' e o endereço do host servidor será 'meu.server.br' . Crie uma pasta para ser o repositório dos projetos. Aqui usaremos como exemplo a pasta '/pasta/repo' . Agora, no servidor, você vai criar uma pasta limpa para receber o projeto e executar o comando de inicialização do projeto git remoto, assim: $ cd /pasta/repo $ mkdir meuprojeto.git $ cd meuprojeto.git $ git --bare init IMPORTANTE : a pasta do projeto compartilhado DEVE terminar com ‘.git’ Em sua área de trabalho LOCAL, você irá para a pasta do projeto que quer iniciar no