JW Player e Youtube

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:

javascript
<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}

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Pedro Adami Janeiro 09, 2009 http://www.autoclubedracena.com	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 http://weblouca.com	@ 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 http://www.grudmania.com	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 http://weblouca.com	@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 http://weblouca.com	@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 http://www.soumaiscultura.com	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 http://www.shopinhome.com.br	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 http://www.youtube.com/cosmopax2000	É 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 http://weblouca.com	@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 http://www.youtube.com/cosmopax2000	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


Marcos Marcelino Agosto 20, 2009	Olá, como faço para deixar a imagem fixa no player antes de iniciar o vídeo, como no youtube? Tem jeito?


GonçaloM Agosto 24, 2009 http://weblouca.com	@Marcos Marcelino Dê uma vista de olhos no seguinte artigo: http://weblouca.com/Artigos/jw...ls-youtube


Yuri Felix Setembro 28, 2009	Mestre, to com uma dúvida cruel... Como faço pra pegar um video de um site qualquer que não seja youtube, e com esse video, eu possa estar salvando e add no meu projeto de TCC? Tipo, quando eu rodo o video no site lá... Ele aparece nesse "JW Player" ai. Poxa, já não sei mais que faço! To precisando muito desse vide para terminar meu projeto. Se for possível me ajudar... Ficarei grato! Desde já, vlw pela atenção!


Dinei Outubro 02, 2009	Boa tarde Gonçalo Martins, Você sabe me dizer como faço para colocar este player dentro das postagens do blogspot? É que gostaria de usar vários players deste num blog de música que tenho e para cada música um player para demostração do áudio. Eu já tinha feito o download dos arquivos do JW Player, já hospedei e coloquei no blog, mas não funciona, não sei o q tá acontecendo, será que você pode dar uma idéia do que seja? Por favor, me responda por e-mail. Obrigado!


Vanderlei Feyth Outubro 05, 2009 http://feyth.com.br	Estou querendo colocar este link http://www.youtube.com/cp/vjVQa1PpcFOS3s6EDoVvYAuJhQiXakRxvR0AnUIuamU= no player mas esta dando erro Poderia me ajudar?


Vanderlei Feyth Outubro 05, 2009 http://feyth.com.br	desculpe aqui vai o link aonde to testando ok geral.feyth.com.br


Rafael de Souza Outubro 06, 2009 http://www.naftalinamix.com	gostaria de saber como faço pra fazer o upload do para o meu servidor pois os arquivos estavam zipados e eu fiz o upload dos arquivos porem o video não aparece na pagina e aparecem os dizeres Obtenha Flash Player para ver este vídeo,sendo que eu tenho o flash palyer instalado e sempre atualizado!!Um abraço e meus agradecimentos desde já!!


Gustavo Rodrigues Outubro 12, 2009 http://rockgmd.wordpress.com	Olá, fui instalar o Pluggin e apareceu uma página dizendo: O plugin não possui um header válido. O que devo fazer. Uso a versão mais recente do Wordpress.


renato silva Novembro 12, 2009	Como eu faço para colocar dois videos e posicionar no lugar que eu quiser da pagina ?


keyla Dezembro 11, 2009	Alguém sabe me dizer como que eu faço para que continue tocando as musicas, ele toca uma musica e para ...obrigado


Josué Dezembro 16, 2009	Não consegui. Como faz isso? Alguém pode me adicionar no MSN e me ajudar? Obrigado! Este endereço de e-mail está protegido de spam bots, pelo que necessita do Javascript activado para o visualizar


lucas Dezembro 26, 2009	parece q nao esta mais funcionando...


juliano Dezembro 27, 2009	Muito bom esse tutorial. me ajudo muito mesmo no desenvolvimento do meu site, vlw mesmo brother, show de bola...


Vinícius Dezembro 27, 2009 http://www.portalcalypso.weebly.com	Tem como inserir uma logomarca minha no player de vídeo que nem a logomarca do YouTube sem precisar editar o vídeo?? Obrigado e parabéns pelo tutorial! Adorei e vai me servir! Abraços!


jossyel Janeiro 02, 2010 http://www.topitb.com	cara ele simplismente eh muito maissa mais o volume não ta funionando ñaum


Mateus Janeiro 27, 2010 http://www.actionfilmes.com	Gostaria de colocar o JW player em meu site, mais é em WordPress e queria saber onde tenque colocar o código (no html ou em alguma postagem) ? Abraços.


Josedil Fevereiro 24, 2010 http://www.2igrejapresbderegistro.net	Olá! Valeu pelas dicas aqui postadas, entretanto estou com um problema, pq o botão do jwplayer que amplia a tela de video não funciona . Seria falta de algum plugin ou coisa parecida a ser locado no meu diretorio da web Grato


CbS Março 05, 2010	Olá! Aparece a mensagem video not found, mas o vídeo existe sim. O que pode ser?


Sergio Cascais Março 17, 2010 http://sergiocascais.com.br	Olá! Gostei bastante da dica, os videos não estão passando no player ainda é possivel usar O JW com os videos do youtube dessa forma ou será q mudou alguma coisa?


junior Março 26, 2010	migo não tow conseguindo eu coloco as coisasr numa pasta chamada player e depois coloco esse codigo q você passou no div mas quando eu vou ver não aparece nada. me ajuda ai msn: Este endereço de e-mail está protegido de spam bots, pelo que necessita do Javascript activado para o visualizar


jusciel Abril 24, 2010 http://www.avastgmz.com	alguem sabe como é que se transmite ao vivo pelo jw player estou tentando a dias e nao consigo quem puder me ajudar meu msn é Este endereço de e-mail está protegido de spam bots, pelo que necessita do Javascript activado para o visualizar


Vinícius Rodrigues Abril 30, 2010 http://www.portalcalypso.weebly.com	Atualize o tutorial, por favor. Não estou conseguindo mais implantar o JW PLAYER. Dá o erro #2124. Ajude-me, por favor!


Smoke Ice Maio 07, 2010 http://www.dnaurbano.com.br	Olá Vinícius! Bom, pelo que eu fiquei sabendo, o youtube alterou a forma com que os vídeos são publicados e, isso afetou o sistema de skins do JW Player.tenho uma solução para rodar o vídeo mas, sem o Skin que vc usa. Caso se interesse, o esquema é o seguinte: no painel de configuração do JW Player vá em configuração global plugins clique no nome do plugin, no caso o "YouTube.com ". do lado direito da tela, vá até "Select Video Player" escolha "youtube player". Pronto! agora os vídeos irão rodar novamente mas, com o player normal do youtube. Isso é interessante para pessoas que estão com problemas com os skins mas, que não querem perder os outros recursos do Joomtube como por exemplo criar categorias, etc. Se esse for o sei caso, faça bom proveito, se não for, me desculpe por não poder ajudá-lo. Eu ainda não descobri como resolver esse problema dos skins. Abraço e até breve! http://www.dnaurbano.com.br


Beto Maio 18, 2010 http://www.empregoadvogado.com	Realmente vai me ser muito útil para meu blog. valew!!


Cardoso Maio 18, 2010 http://www.medicamentosonline.org	Não consegui fazer funcionar!!


Pedro Maio 23, 2010	Seria possivel rodar extensoes como wmv, mkv e avi? se tiver como... me avisa por email.


Thiago Maio 24, 2010 http://namesadobigbrother.wordpress.com/	Eu quero colocar no meu blog, mas nao sei como faz o Upload indicado na segunda posição.


Barthô Junho 07, 2010 http://www.dicaquente.com.br	Olá. Nossa fiquei super interessado em colocar um player de vídeo no meu site. Na seção "editoriais idealistas" (www.dicaquente.com.br/editoriais_idelistas.html)ocorre que não sei como colocar o vídeo que pretendo. Se vc acessar esta página e clicar no link "em breve", verá que está sendo exibido o próprio vídeo da JW, isso pq mesmo com a sua explicação eu não consegui "encontrar" o lugar para indicar o caminho do vídeo (que está baixado dentro do meu comp**ador). Já tentei de tudo. Uma das coisas que fiz, foi enviar o vídeo para o meu servidor de hospedagem, mas também não funcionou. Tentei descobrir se há na plataforma JW um local para onde eu envie tal video para que ele seja acessado por lá (infelizmente não encontrei essa opção). Enfim minha ideía (de colocar episódios do seriado Jeannie é um Gênio neste editorial) é interessante, mas executá-la tem sido uma verdadeira batalha profissional (hehe, levando-se em consideração que eu não sou um profissional do ramo). Você poderia me auxiliar nesta tarefa? Sucesso a todos e abçs.


anonimo Julho 13, 2010 http://anonimo.com.br	faltou as fontes do seu post, eu li isso em outro site, muito maior que o seu =D, a fontes aumentam a credibilidade do site!!


GonçaloM Julho 17, 2010 http://weblouca.com	@anonimo Não faltaram fontes nenhumas para colocar, uma vez que este artigo foi escrito e pensado totalmente por mim... no entanto já começa a ser comum esses grandes sites copiarem conteúdo sem referirem fontes... tendo dito... da próxima vez agradeço a identificação de forma a pode-lo elucidar melhor sobre a realidade da internet!