RSS
17 Jun 2010

Personalizando o player embed do youtube

Author: @emersonbroga | Filed under: Web

Olá pessoal,
Hoje vou dar algumas dicas básicas sobre o player embed do youtube.

Player Embed do Youtube

Player Embed do Youtube

Muitos de vocês pegam o código <embed> disponibilizado pelo youtube e simplesmente colocam em seu site.
Existem uma série de parâmetros que vocês pode utilizar para habilitar e desabilitar alguns recursos desse player.

Essa é uma URL comum do youtube http://www.youtube.com/watch?v=COvCPJGjaiE onde vc tem o codigo do vídeo como parâmetro http://www.youtube.com/watch?v=COvCPJGjaiE principal. Após esse parâmetro podemos passar vários outros parâmetros de acordo com nossa necessidade.

1 – Vídeos Relacionados
Com o parâmetro rel, o player exibe ou não os vídeos relacionados. Os valores aceitos são 0 e 1, e o padrão é 1.

Exemplos:
Com vídeos relacionados:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&rel=1
Sem vídeos relacionados:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&rel=0

2 – Autoplay
Com o parâmetro autoplay, o player assim que carregado começa a “tocar” o vídeo. Os valores aceitos são 0 e 1, e o padrão é 0.

Exemplos:
Com Autoplay:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&autoplay=1
Sem Autoplay:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&autoplay=0

3 – Loop
Com o parâmetro loop, o player em caso de vídeo único, fica “tocando” o vídeo em “loop”, em caso de playlist ele “toca” toda a playlist e recomeça. Os valores aceitos são 0 e 1, e o padrão é 0.

Exemplos:
Com Loop:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&loop=1
Sem Loop:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&loop=0

4 – Disable KeyBoard
Com o parâmetro disablekb, o player aceita os atalhos de teclado. Os valores aceitos são 0 e 1, e o padrão é 0.

Os atalhos de teclado são:
	Barra de espaço: Play / Pause
	Seta Esquerda: Volta em 10% o vídeo.
	Seta Direita: Avança em 10% o vídeo.
	Seta Cima: Aumenta volume.
	Seta Baixo: Diminui volume.
Exemplos:
Com atalhos de teclado:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&disablekb=1
Sem atalhos de teclado:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&disablekb=0

5 – Border
Com o parâmetro border, o player exibe a borda. Os valores aceitos são 0 e 1, e o padrão é 0.

Exemplos:
Com Border:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&border=1
Sem Border:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&border=0

6 – Color1, Color2
Com o parâmetro color1
e color2
, definimos as cores do player. Os valores aceitos são cores hexadecimais.

Exemplos:
Cores Azul e Amarelo:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&color1=0000FF&color2=FFFF00

7 – Start
Com o parâmetro start, o player começa a exibição do vídeo a partir do valor que for passado. Os valores aceitos são numeros inteiros positivos.

Exemplos:
Comecar o vídeo em 10s:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&start=10

8 – High Definition
Com o parâmetro hd, definimos se o player ira “tocar” o vídeo em alta definção ou não. Com o hd definido como 1, ele toca o vídeo em alta definição, caso ela esteja disponível. Os valores aceitos são 0 e 1, e o padrão é 0.

Exemplos:
Com High Definition:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&hd=1
Sem High Definition:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&hd=0

9 – Show Search
Com o parâmetro showsearch, o player exibe a barra de busca. Lembrando que o se o atributo rel for 0 o showsearch será 0 também. Os valores aceitos são 0 e 1, e o padrão é 1.

Exemplos:
Com Barra de busca:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&showsearch=1
Sem Barra de busca:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&showsearch=0

10 – Show Info
Com o parâmetro showinfo, o player exibe a informações como título e nota(ratings), antes do vídeo tocar. Os valores aceitos são 0 e 1, e o padrão é 1.

Exemplos:
Com informações:
	-http://www.youtube.com/watch?v=COvCPJGjaiE
	-http://www.youtube.com/watch?v=COvCPJGjaiE&showinfo=1
Sem informações:
	-http://www.youtube.com/watch?v=COvCPJGjaiE&showinfo=0

Assim você pode montar a url para o player embed com os atributos que achar necessário:

Exemplo:
Um vídeo com o player nas cores Azul e amarelo, com loop e sem vídeos relacionados.
	-http://www.youtube.com/watch?v=COvCPJGjaiE&color1=0000FF&color2=FFFF00&loop=1&rel=0

Aí você coloca essa url no seu embed player.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
	<param name="allowFullScreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="src" value="http://www.youtube.com/watch?v=COvCPJGjaiE&color1=0000FF&color2=FFFF00&loop=1&rel=0" />
	<param name="allowfullscreen" value="true" />
	<embed type="application/x-shockwave-flash" width="640" height="385" src="http://www.youtube.com/watch?v=COvCPJGjaiE&color1=0000FF&color2=FFFF00&loop=1&rel=0" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Existem vários outros parâmetros, que você pode usar, eles estão disponíveis na API do youtube.

Referência:
http://code.google.com/apis/youtube/player_parameters.html

Espero que tenham gostado.
1 Star2 Stars3 Stars4 Stars5 Stars (media: 5.00 ) Loading ... Loading ...

Share and Enjoy:
  • Twitter
  • StumbleUpon
  • del.icio.us
  • Google Bookmarks
  • Facebook
  • Print
  • email
  • Technorati

Tags: , , , , ,

Leave a Reply