JW Player e Youtube

09 Janeiro 2009 Escrito por Gonçalo Martins

Para quem não sabe o JW Player é um player flash que qualquer pessoa pode integrar na sua página de Internet de forma a reproduzir vídeos. Até aqui tudo bem. O interessante neste player são os plugins e os skins que existem para ele. Sendo ainda possível com alguma facilidade programar plugins e temas personalizados.

Mas no titulo tenho "JW Player e Youtube". Youtube porque? Quem não conhece o player tradicional do Youtube? Aquele player sem vida, e sem forma possível de personalizar (sem ser através da API do youtube).

É neste ponto que o JW Player vêm em socorro do criador de uma página de Internet que queira integrar o seu vídeo com "estilo", mas não tenha tráfego para gastar no streaming de vídeos, e não queira ainda utilizar o skin (mais que batido) do Youtube.

Confuso?

Vamos imaginar que tenho um vídeo chamado de "guitarra", queria reproduzir este vídeo no meu site num player por mim personalizado. No entanto gostava que este estivesse alojado nos servidores do Google (Youtube).

As vantagens de o video estar alojado nos servidores do Google são imensas, mas a principal é mesmo a velocidade de Download do vídeo por parte do utilizador da página de Internet.

1. Instalar JW Player no seu website

1.1 - Aceda à página do JW Player e faça download do pacote de instalação;

1.2 - Faça o Upload para o seu servidor. Neste caso considerei o upload para a pasta '/player';

1.3 - Para colocar o vídeo no seu website utilize o seguinte código:

<div id="container" ><a href="http://www.macromedia.com/go/getflashplayer">Obtenha Flash Player</a> para ver este vídeo</div>
<script type="text/javascript" src="/player/swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("/player/player.swf","ply","325","250","9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam('wmode','opaque');
s1.addParam("flashvars",'&file=http://endereço_para_o_video');
s1.addVariable('type', 'video');
s1.write("container")
</script>

^{Nota: Plugins para JW player | Modulos para JW Player |}^{Skins para JW Player}

2. O Youtube e os problemas de qualidade do vídeo

Por esta altura o JW player já deverá estar pronto a funcionar no seu website. Agora teoricamente é só adicionar em '&file=' o endereço do vídeo para o Youtube.

Neste caso http://www.youtube.com/watch?v=8PNx00lRd1Y

No entanto a qualidade deixa algo a desejar como podem ver no exemplo abaixo:

JW player: Get the Flash Player to see this player.		Youtube player:
^{Nota:Quanto mais se aumentar a janela do vídeo maior vai ser a diminuição de qualidade em relação ao player do YouTube}

O vídeo possui ainda o Logo YouTube no canto inferior direito.

Então como retirar o logo YouTube e melhorar a qualidade do video dramaticamente (de maneira a que esta fique superior à emitida pelo youtube) ?

Vamos utilizar uma ferramenta externa. O site www.youtubemp4.com. A solução ideal seria programar um script php localmente, mas para este artigo o site externo vai servir.

Possuímos, por exemplo, o endereço Youtube: http://www.youtube.com/watch?v=_Z_lAjt-gMw

E vamos modifica-lo para http://www.youtubemp4.com/video/_Z_lAjt-gMw.mp4

Verifiquem agora no exemplo abaixo a melhoria significativa da qualidade do video, em relação à versão transmitida por defeito via youtube e o desaparecimento do logo YouTube

JW player: Get the Flash Player to see this player.		Youtube player:
^{Nota: A qualidade do vídeo matem-se muito elevada em relação à do player do YouTube}

Artigos Relacionados

Trackback(0)

TrackBack URI for this entry

1 2 3 >



Pedro Adami Janeiro 09, 2009	Nossa a diferença realmente é grande, muito bom mesmo, vou testar aqui. Valeu.


Luiz Henrique Janeiro 13, 2009	Olá. Por favor, por qual mecanismo foi retirado o logo Youtube, já que você faz referencia a um script PHP como sendo o ideal, ou o próprio mp4 o faz?


GoncaloM Janeiro 13, 2009	@ Luiz Henrique O próprio site youtubemp4 "retira o logo". Eu refiro que a solução ideal seria ter um script php, ou outro género de script para realizar localmente o que o site youtubemp4.com faz. Isto, porque caso o site youtubemp4 vá offline, você fica "agarrado"...


Luiz Henrique Janeiro 14, 2009	Valeu Meu Irmão! Muito obrigado pela atenção.


luiz Janeiro 14, 2009	Como faço para colocar mais de um player na pagina? Quando coloco o segundo video ele não parece, só fica o skin do primeiro.


GoncaloM Janeiro 14, 2009	@luiz O código "injecta" o Player em determinada DIV no caso do exemplo na 'div' 'container'. é só duplicar o código acima e modificar as duas ocorrências de 'container' por 'container2' por exemplo. Pode ainda apagar a linha onde se encontra swfobject.js, ao duplicar o código. Uma vez que já não é necessário realizar o load do javascript essencial ao funcionamento do player.


Junior DSG Janeiro 15, 2009	olá olha, eu nao entendi como vc fez pra melhorar a imagem do video... tem como me explicar???


Hugo Janeiro 22, 2009	Parabéns! Ótimo Tutorial! Muito obrigado mesmo!


claudio Janeiro 26, 2009	Por favor gostaria de saber pq não funciona em meu site ? baixei o player e todos e todos os arquivos ,coloquei o codigo endicado acima. o player fica carregando e nunca toca o video. o endereço do video é este abaixo . http://br.youtube.com/watch?v=uUw8vvYX5Fw por gentileza amigo me ajude .desde ja grato


GonçaloM Janeiro 27, 2009	@claudio Não se se entendi o seu problema... mas julgo que está a tentar realizar o load do vídeo sem ser através do site "youtubemp4" Em qualquer dos casos tente o seguinte endereço: http://www.youtube.com/watch?v=uUw8vvYX5Fw basicamente é o mesmo, mas sem o 'br.' Vá dando feed back...


claudio Janeiro 28, 2009	Obrigado por me responder .Fico grato mesmo . Mas creio que seja erro meu mesmo . olha coloquei este link que vc me passou ( http://www.youtube.com/watch?v=uUw8vvYX5Fw )mas não inicia o video ,abre uma pagina de alerta, avisando que o player esta tentando se comunicar com o datayoutube e me leva para a page da macromédia. e não carrega o video nunca .tentei com o video do violão tbm que vc usou no tutorial e mesmo assim não da certo . Se puder me ajudar te agradeço.


claudio Janeiro 28, 2009	Se o comentário deixasse eu colocaria o script inteiro aqui para vc ver , mas mesmo assim do que está la em cima so alterei o link do video . Eu estou fazendo testes em meu pc 1º, para depois hospedar será que seja isso ? valeu amigo e parabéns pelo seu tutorial .


Gabriel Fevereiro 14, 2009	Ola Gonçalo vc saberia me dizer pq aparece o erro 2036 no meu player, agradeceria se me ajudasse Obrigado


Rodrigo Peixoto Fevereiro 15, 2009	Muito bom, agora só falta alguem incrementar e criar um arquivo php que gere a fonte do video, por exemplo: &file="video.php" dentro do video.php conteria ex: http://br.youtube.com/watch?v=uUw8vvYX5Fw sei lá genios de plantão que se virem e encrementem a parada.


Luciane Maio 26, 2009	E se eu quiser colocar uma legenda embaixo do player na mesma div container?


Leonardo Cardoso Junho 03, 2009	É muito fácil saber o que acontece ai. O site YoutubeMP4 baixa o vídeo em formato Mp4 que já está dentro do Youtube. Ou seja, dentro do próprio Youtube você pode melhorar esta qualidade quando quiser! Assim: Qualide Youtube FLV (Padrão): http://www.youtube.com/watch?v=IYseeHyyCK8 Qualide Youtube MP4 (HQ): http://www.youtube.com/watch?v=IYseeHyyCK8&fmt=18 Qualide Youtube FLV (HD): http://www.youtube.com/watch?v=IYseeHyyCK8&fmt=22 Qualide Youtube FLV (HQ): http://www.youtube.com/watch?v=IYseeHyyCK8&fmt=35 Onde qualide FLV (HQ) é superior a MP4 (HQ), mas, está disponivel apenas em vídeos na mais alta resolução, no caso deste meu vídeo. O youtube já está colocando a qualide MP4 (HQ) em botão no player, para não precisar ficar colocando este &fmt=18 no link do vídeo. PS. Este truque, funciona também com o youtubemp4. Assim agora você pode colocar até vídeos em HD no seu site com player personalizado. Basta colocar: http://www.youtubemp4.com/video/IYseeHyyCK8&fmt=22.mp4 PRONTO! O vídeo vai ser baixado em FLV e não MP4 e em HD e não HQ. Agora, quem tiver o código igual ao que o YoutubeMP4 faz para obter o vídeo do Youtube deste jeito, por favor me passe. Grato!


GonçaloM Junho 04, 2009	@Leonardo Cardoso Sim efectivamente é isso que acontece. No entanto um script para ir buscar o link do vídeo ao cache do google necessita de levar o &fmt='xx' embutido. Caso o vídeo não possua uma versão HQ ou superior, ou possua algum problema, resulta em erro! Um exemplo: http://www.youtube.com/watch?v=fJa-KazVMYU como pode verificar o HQ não funciona, pelo que os seguintes links, também não funcionarão. http://www.youtubemp4.com/video/fJa-KazVMYU&fmt=22.mp4 http://www.youtubemp4.com/video/fJa-KazVMYU&fmt=35.mp4 Isto num script do género do Youtube mp4 é um grande problema, devido à generalidade que o script têm que apresentar. E devido ao facto de não haver, pelo menos à luz dos meus limitados conhecimentos forma de saber se o youtube possui versão >=HQ válida. Sendo assim scripts como o youtube mp4 ficam-se pelo &fmt=18. É possível programar um script deste género utilizando o CURL do php para requisitar o link de google cache.


Leonardo Cardoso Junho 04, 2009	Exatamente, retorna como erro. Já no player do Youtube é programado, caso retorne como erro, executar na qualidade padrão. Mas este exemplo eu fiz baseado no player que eu fiz, e não usando o JW Player. Pois este post me ajudou muito, pois eu nem sabia que tinha este youtubemp4. No caso, meu player pega a url normal do vídeo pelo youtubemp4, e se tiver versão de qualidade superior como HD, ele exibe um botão com o nome do mesmo e recarrega o vídeo acrescentando ao final da url &fmt=numero da qualide.


neofrogger Julho 31, 2009	e possivel de forma alguma utilizar isto para videos do sapo?


Vinícius Agosto 18, 2009	Muito bom. Como capturar os vídeos em jw? []'s

1 2 3 >

Escreva o seu Comentario

You can add your comment here

JW Player e Youtube

1. Instalar JW Player no seu website

2. O Youtube e os problemas de qualidade do vídeo

Artigos Relacionados

Nuvem de Tags