2

Estou com essa missão e já vi algumas perguntas mas nenhuma suprimiu a minha necessidade.

O meu objetivo era ter apenas a tela e o vídeo, e personalizar totalmente o player do Youtube, botões pause, stop, volume, fullscreen, controlar todas essas funcionalidades.
Percebi que existem algumas ferramentas gratuitas que fazem isso, no entanto são poucas as mudanças.

Como posso fazer estas mudanças e personalizar por completo o reprodutor de vídeo do Youtube?

2 Respostas 2

1

Para personalizar por completo o player do Youtube, precisas de fazer uso da Youtube API, e depois terias que programar bastante código Javascript que será um longo processo e verdadeiramente extensivo como podes dar uma olhada neste artigo que explica como é feito este processo.

Felizmente existe software/plugins já prontos para isso, o que nos facilita bastante a vida, como por exemplo plugins como o: PragmaticPlayerJs

Este plugin permite-te utilizar um player personalizado apenas adicionando o seguinte código abaixo:

<div id="youtube-video"><!-- --></div>

<script>
$("#youtube-video").pPlayer({
    youtubeVideoId: "YE7VzlLtp-4",
    autoplay: 0,
    origin: "http://yoursite.com"
});
</script>

Mas como é óbvio primeiro tens que instalá-lo no teu script, chamando-o como por exemplo costumamos chamar uma biblioteca jQuery, só que neste caso com os ficheiro do Plugin. Exemplo:

<link rel="stylesheet" type="text/css" href="../pplayer/assets/pplayer.css" />
<script type="text/javascript" src="../pplayer/js/jquery.pplayer.js"></script>
<!-- etc... -->

Nota: Também é necessária a implementação da Biblioteca jQuery para que o plugin funcione

Depois, para personalizares o player à tua maneira, basta fazeres as alterações no código CSS do Plugin e se quiseres, criar os teus próprios ícones e substituir as respectivas imagens pelos teus novos ícones personalizados, dando-te assim a possibilidade de ter um player do youtube completamente personalizado à tua maneira apenas com a implementação deste Plugin.

Aqui está um exemplo do resultado final de como ele irá ficar.

0

Uma vez eu precisei alterar, mas não consegui fazer muita coisa. Por padrão o youtube permite vc alterar as propriedades da forma como abaixo:

<p>
      <%
        options = '?'
        #options += '&autoplay=1' # 1: Inicia automatico ao carregar a pagina; 2: normal
        #options += '&controls=0' # 0: Esconde os controles de opção; 1: Mostra; 2: mostra, mas o flash player inicia depois do play
        #options += '&autohide=1' # 2(default): Esconde os controles apos um tempo; 1: Assim que iniciar; 0: Sempre visível
        options += '&showinfo=0' # Esconde o cabeçalho
        options += '&rel=0' # 0: Remover videos relacionados; 1(default): exibe
        options += '&theme=light' # Tema light ou dark
        options += '&modestbranding=1' # 1: Oculta o botão para ver no Youtube; 0(default): exibe.
        #options += '&color=white' # (Desativa modestbranding) white: Cor da linha branca; red: vermelha 
        options += '&cc_load_policy=1' # 0: Legendas, padrão do usuário; 1: Mostra as legendas
        #options += '&disablekb=1' # 1: Habilita teclas de atalho; 0(default): desabilita.
        #options += '&enablejsapi=1' # 1: Habilita Javascript API; 0(defaul): desabilita
        #options += '&start=' # Número: informa em qual momento (em um determinado segundo) o video deve iniciar.
        #options += '&end=' # Número: informa em qual momento (em um determinado segundo) o video deve parar.
        #options += '&fs=0' # 0: Desabilita o botão FullScreen; 1(default) habilita.
        options += '&iv_load_policy=3' # 3: Desabilita a exibição das anotações do video; 1(default) habilita
   #    # listType usado em conjunto com list e carrega uma lista de videos
   #    # '&list=parametro' # uma pesquisa; id do usuario do qual serão carregados os videos; id da playlist que será carregada.
   #    # Ex: &listType=playlist&list=PLC77007E23FF423C6
        #options += '&loop=1' # 1: o video sera repetido indefinidamente; 0(default): o video so e apresentado uma vez
        #options += '&rel=0&color1=0x006699&color2=0x54abd6&border=0'
        movie = '//www.youtube-nocookie.com/embed/JfeeGblHdlg'
        width='640'
        height='360'
      %>
      <iframe width="<%= width %>" height="<%= height %>" src="<%= movie %><%= options %>" frameborder="0"></iframe>
    </p>

Nesse caso eu to montando uma string com options que vou substituir no iframe.

Opções como alterar a cor do player e dos botões já não é mais suportada nativamente pelo youtube.

No site do mundo canibal eu vi que eles conseguiram personalizar bastante, mas acho que utilizaram uns scripts próprios. De repente fazendo uma engenharia reversa no site deles da pra descobrir alguma coisa.hehe :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .