JW FLV Media Player – Player de vídeo Flv com parâmetros XML

O JW Player é um caminho fácil e flexivel para adicionar vídeos e audios em seu website. Este player suporta e executa qualquer formato do adobe flash player (flv, mp4,mp3,AAC,JPG.PNG e GIF). Também suporta RTPM, HTTM e live streaming, varios formatos de players (skins) e playlists, e muitos tipos de configurações adaptadas por extensões javascript .

Download exemplos JW Player

Player de vídeo Flv com parametros XML – Solução JW Player – 5/11/2008

Flv é um tipo de compressão para arquivos de vídeo.Hoje iremos utilizar uma ferramenta muito interessante, o JW PLAYER , uma solução de player para web que fornece excelentes resultados , bem fácil de ser utilizado e totalmente customizável. Perfeito para quem está procurando uma solução em player de vídeo para web e ainda esta começando no estudo de scripts e linguagens de programação.

Flv é um tipo de compressão para arquivos de vídeo. Esta extensão é utilizada para exibição de vídeos no padrão flash, que permite uma compressão muito grande do arquivo , tendo uma relação excelente entre tamanho do vídeo e qualidade da imagem, melhorando a experiência do usuário ao assistir vídeos na web ,pois enquanto ele assiste a uma parte do vídeo já carregada, continua carregando o restante do vídeo por download progressivo ou stream. É o tipo de compressão que possibilitou a expansão do uso de vídeos na rede, através de sites como o youtube e derivados, torna arquivos grandes de vídeos em tamanhos bem reduzidos e consegue manter boa parte da qualidade da imagem, até mesmo no padrão HDV.

Para converter arquivos de vídeo para o formato flv, você pode utilizar o adobe flash cs3 video encoder ( que acompanha a versão do flash cs3 professional), ou utilizar outros softwares como visualhub, Isquint, entre outros.

Esta parte é muito importante , pois é nela que definimos a qualidade e o tamanho do vídeo que será colocado para exibição no site. Eu particularmente prefiro vídeos com qualidade, mesmo que espere um pouco mais para assistir, mais isso vai com o objetivo de cada desenvolvedor e do público alvo que deseja atingir com a exibição do vídeo. Hoje trataremos da utilização do player ( botar ele pra exibir um arquivo flv contido em um xml ), em breve trarei um tópico exclusivo sobre o tratamento de arquivos de vídeo na corversão para flv , bem como dos recursos como flash media server e flash media stream,interessantes para exibição de vídeos em massa ( por um grande numero de usuários ao mesmo tempo) ou ao vivo.

Então vamos ao que interessa:

Usando o JW FLV Media Player 4.2

Após fazer o download dos arquivos do exemplo você poderá abrir a pagina reader.html e ver o player genérico em funcionamento.

Rodando o player em uma pagina independente:

1 – Crie um novo arquivo de html no dreamweaver, no nosso exemplo básico "player.html"

2 – adicione o código do player no body do seu novo arquivo html:

Exemplo Básico sem uso de xml.

CODE:

<div id="container"> </div>


  <script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

var s1 = new SWFObject("player.swf","container","328","200","9","#FFFFFF");
s1.addParam("allowfullscreen","true");

s1.addParam("allowscriptaccess","always");

s1.addParam("flashvars","file=video.flv&image=preview.jpg");

s1.write("container"); </script>

EXPLICANDO O CÓDIGO:

<!– cria uma div onde o player vai ser inserido–>

<!– para o posterior uso do flash, chama o arquivo swfobject.js que está na mesma pasta do player . Se você salvou a pagina do player personalizado em um local diferente da pasta do jw player, transfira este arquivo para a mesma pasta do novo html ou indique corretamente a lozalização.–>

<!– indica o inicio do uso de um javascript–>

<!–cria uma variável e define suas propriedades, aqui você seta o endereço do player.swf ( também contido na pasta do jw player), altera também, a o tamanho do player em width e height, altera também a cor de fundo do flash –>

var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");

<!–adiciona parametros ao flash, "allowfullscreen","true" habilita a opção de visualizar o vídeo tem tela cheia.–>

s1.addParam("allowfullscreen","true");

s1.addParam("allowscriptaccess","always");

<!–adicionamos as variaveis ao flash. em "file" indica o caminho onde temos o vídeo, usamos "&" para ligar as variáveis, "imagem" indica o caminho para a figura que abre enquanto o player não for executado. –>

s1.addParam("flashvars","file=video.flv&image=preview.jpg");

<!–Indica onde em qual div irá executar , Estes são os parâmetros básicos para uso em qualquer página, –>

s1.write("container");

Exemplo do jw player buscando os arquivos em um xml, personalizando o player por skin, adicionando buffering e embed .

O JW PLAYER POSSÚI VARIAS POSSIBILIDADES DE CUSTOMIZAÇÃO, COM PLUGINS , SKINS E E MUITOS OUTROS RECURSOS. VOCÊ PODE VER UMA SÉRIE DELES NO LONGTAIL VIDEO ,site com uma enorme quantidade de plugins para o jw player.

CÓDIGO HTML:

<div id="container" >
<p>
não há flash, ou o javascript está desabilitado.
</p>
</div>

so.addParam("allowscriptaccess","always");
so.addParam(’allowfullscreen’,'true’);
so.addParam("flashvars","config=configplayer.xml");

so.write("container");
</script>

EXPLICANDO OS CÓDIGOS ALTERADOS OU INSERIDOS NO HTML .

<!– cria um conteúdo para a div do player que apareçerá caso haja algum erro de exibição do player . –>

<p>não há flash, ou o javascript está desabilitado.</p>

<!– Indica o caminho do xml onde estarão os parametros e variáveis do player–>

so.addParam("flashvars","config=configplayer.xml");

CÓDIGO DO ARQUIVO XML DE NOME "configplayer.xml" .

<file>video.flv</file>
<fullscreen>true</fullscreen>
<skin>embedSkin.swf</skin>

<plugins>embedPlugin</plugins>

<image>preview.jpg</image>

</config>

DETALHAMOS OS PARAMETROS DO ARQUIVO XML.

Para nosso exemplo, não será necessário aprofundamentos de explicações dos códigos do xml, basta explicar que cada parâmetro está inserido no xml para que o html o localize e execute. Vamos nos prender nos plugins inseridos para esta versão de player xml, pois os outros parâmetros já foram citados no exemplo simples acima .A lógica é a mesma, só a forma de setar as propriedades é que muda um pouco. Veja os Códigos descritos para a Customização do player:.

<!– inserindo o caminho do skin baixado no longtail video para customizar o player . Para facilitar eu adicionei ao arquivo fla do skin do longtail, o botão embed video, que usaremos para fornecer ao usuário o código de exibição do vídeo para ele botar em seu site.–>

<skin>embedSkin.swf</skin>

<!– habilita o plugin do botão embed que fornecer ao usuário o código de exibição do vídeo para ele botar em seu site.–>

<plugins>embed-1</plugins>

<!– coloca o vídeo para ser exibido em toda a sua area.–>

<!– faz com que o player execute depois de 10% do arquivo carregado–>

<!-seta as propriedades do player para o codigo do usuario. mude de acordo com as suas informacoes de dominio e localizacoes.–>

<!-os parametros abaixo sao as informacoes do embed na interface , O conteudo pode ser editado. A ultima linha define que apos o temino do player será disponibilizado automaticamente a opcao do código embed para o usuário. –>

É isso galera, de resto é so botar a cabeça pra funcionar e pesquisar que é possível fazer muito mais com esse recurso.

Tags: jw flv media player

S	T	Q	Q	S	S	D
« jan
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

JW FLV Media Player – Player de vídeo Flv com parâmetros XML

Player de vídeo Flv com parametros XML – Solução JW Player – 5/11/2008

Usando o JW FLV Media Player 4.2

Exemplo Básico sem uso de xml.

Exemplo do jw player buscando os arquivos em um xml, personalizando o player por skin, adicionando buffering e embed .

DETALHAMOS OS PARAMETROS DO ARQUIVO XML.

Deixe seu comentário

Categorias

Calendário

Meta

Arquivos

Comentários recentes

Posts recentes

Nossos Projetos