09

Jan

JW Player e Youtube

Escrito por Gonçalo Martins   


JW player youtubePara 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
  1. <div id="container" ><a href="http://www.macromedia.com/go/getflashplayer">Obtenha Flash Player</a> para ver este vídeo</div>
  2. <script type="text/javascript" src="/player/swfobject.js"></script>
  3. <script type="text/javascript">
  4. var s1 = new SWFObject("/player/player.swf","ply","325","250","9","#FFFFFF");
  5.  
  6. s1.addParam("allowfullscreen","true");
  7.  
  8. s1.addParam("allowscriptaccess","always");
  9.  
  10. s1.addParam('wmode','opaque');
  11.  
  12. s1.addParam("flashvars",'&file=http://endereço_para_o_video');
  13.  
  14. s1.addVariable('type', 'video');
  15.  
  16. s1.write("container")
  17. </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


cometarios
Trackback(0)
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.

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!


Escreva o seu Comentario
 
  pequeno | maior
 

busy
 

Patrocinadores do Site

Subscrever Feed



Artigos

Ultimos artigos
jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...