Over hits 01
ok
Boa Tarde visitante! Hoje é Quarta-feira, 10 de Março de 2010
[ Fechar ]

Indique esta notícia para um amigo, preencha os campos abaixo:













Player de .FLV Dinâmico (Flash+PHP)

Raphael Bruno
(8836 visita(s))

Categoria >> Flash
26 de Abril de 2008
Aumentar o tamanho da fonte da notícia Diminuir o tamanho da fonte da notícia Envie esta notícia para um Amigo Imprimir esta matéria

Olá pessoal, neste tutorial ensinarei a criar um player de FLV dinâmico Flash+PHP, imaginem um player de vídeos .flv, você terá vários vídeos assistindo no mesmo player, na mesma página, no mesmo estilo do YouTube.

Poxa, isso é muito show !!!

Lembrando que neste tutorial farei o player com componente do Flash, isso para que o tutorial seja o mais fácil possível de entender, mas se você tiver uma ótima noção de Action Script, você poderá fazer um player personalizado sem problemas.

1º - Vamos fazer o player.
2º - Vamos converter nossos vídeos.
3º - Vamos criar nossa página dinâmica.

Vamos ao que interessa...!!!

• 1º - Vamos fazer o player...

Com o Flash aberto faça duas camadas, veja o exemplo na Fig1.

• Camada “AS”
• Camada “Component”


Fig. 1

Abra a janela de componentes no menu “Window>Components” ou tecle “Ctrl+F7”, com a janela aberta, Fig2, vá em “FLV Playback Player 8” e arraste o componente FLVPlayback para o a camada “Component”.


Fig. 2


Ajuste o player no palco ao seu modo, agora vamos as configurações básicas do nosso player, selecione o player, coloque a instância de “player”, vá na aba de parâmetros e faça as seguintes configurações... Fig3.

autoPlay = false
contentePath = é o caminho do video.flv, porem aqui você deve deixar vazio, pois iremos definir o caminho via Action Script.
skin = escolhi o SteelExternalPlaySeekMute.swf, escolha ao seu modo.




Fig. 3

Agora vamos para a Action Script, selecione o primeiro frame da camada AS e coloque a Action Script abaixo, deixando como na Fig4:

1 - var url = _level0.video;
2 - player.contentPath = url;


Fig. 4


Explicação:

01  Afirmo que a variável “url” irá capturar externamente o valor de “video”.

02  Afirmo que o vídeo do player será o caminho que a variável “url” terá(Assim definindo o caminho do parâmetro “contentPath” que não tinha definido antes).

Bom, o player já foi, salve seu projeto e publique o swf, para publicar, vá ao menu “File>Publish” ou tecle “Shift+F12”, repare que ao publicar aparecem
2 .swfs na pasta, um é o player e o outro é o skin, Fig5, não apague.


Fig. 5

• 2º - Vamos converter nossos vídeos.

Para converter nossos vídeos vamos usar um programa que por padrão já é instalado junto com o Macromedia Flash.

O nome é Macromedia Flash Video Encoder, você pode encontrar no menu “Iniciar>Programas” na pasta da “Macromedia”.

Não explicarei muito, pois o programa é bem intuitivo...

Vamos lá, abra o Macromedia Flash Video Encoder e adicione os vídeos clicando no botão “Add”, Fig6.


Fig. 6

Na janela que abriu procure seus vídeos e clique em abrir, seus vídeos serão adicionados no programa, se você preferir fazer configurações de qualidade dos vídeos clique no botão “Settings...”, Fig7.


Fig. 7

Na janela que abriu escolha a melhor opção de qualidade para você, o programa já tem qualidades pré-definidas clicando na ComboBox aparecerá essas opções, Fig8.


Fig. 8

Você pode personalizar as configurações clicando no botão “Show Advanced Settings”, Fig9, Assim abrirá mais opções para modificar a qualidade de seus vídeos.


Fig. 9

Faça sua configurações e clique em “OK”. Eu deixei meus vídeos na configuração “Flash 8 - Low Quality (150kbps)” como mostra na Fig8.

Feito as configurações clique em “Start Queue”, Fig10.


Fig. 10

Pronto, feito isso já começa a converter para flv, colocando os vídeo convertidos para flv na mesma pasta dos vídeos originais.

Após converter os vídeos crie uma pasta com o nome de “videos”, coloque seus vídeos em flv dentro e, coloque a pasta junto dos outros arquivos.

Se você tiver problemas com esse programa leia as observações no final deste tutorial. (lá em baixuuuu...)

• 3º - Vamos criar nossa página dinâmica.

Com os vídeos convertidos, agora vamos partir para a página em php, abra seu editor de páginas, eu uso o Macromedia Dreamweaver.

Crie uma nova página e salve como player.php, Fig11.


Fig. 11


Antes de incluir o player.swf na página, vamos fazer uns pequenos e "interessantes" ajustes, com o html que temos vamos adicionar o código em
php abaixo, deixando como na Fig12.

01 - <html>
02 - <head>
03 -    <title>Player de FLV Din&acirc;mico -> <?php echo $_GET["titulo"]; ?></title>
04 - </head>
05 -
06 - <body>
07 - <?php echo $_GET["titulo"]; ?><br />
08 - </body>
09 - </html>



Fig. 12


• Explicação:


3 – Aqui eu afirmei que o php vai imprimir na tag <title> o valor de titulo que será capturado da url da página, que será definido pelos links.

7 – Aqui é o mesma da linha 3, mas aqui ele imprimirá o valor de titulo na própria página, e também adicionei uma quebra de linha “<br />”.


Adicione o “player.swf” na página, lembra da variável “url” que afirmamos no Action Script do player? Pois é, vamos fazer com que a nossa variável receba um valor para chamar o vídeo desejado.


Selecione o swf e mude o caminho que era “player.swf” para “player.swf?video=<?php echo $_GET["video"]; ?>”, isso fará com que a variável “video” receba o valor que será dado pelos links, Fig13.


Fig. 13

Pronto a estrutura está toda pronta, restando apenas inserir os links, farei dois links e colocarei abaixo do swf, no link definirei:

titulo = Nome do vídeo que será exibido.
video = A url do vídeo, é importante que aqui fique o caminho completo do vídeo ex.: http://www.meusite.com.br/videos/video.flv. os dois exemplos abaixo não usei o caminho completo pois estou testando localmente, se não usar o caminho completo o vídeo não funcionará corretamente.

Segue abaixo os dois links:

<a href="player.php?titulo=Movimentando minha mão&video=videos/minha_mao.flv">Minha Mão</a>
<a href="player.php?titulo=Meu Computador&video=videos/pc.flv">Meu Computador</a>

Os mesmos exemplos com os caminhos completos.

<a href="player.php?titulo=Movimentando minha mão&video=http://www.meusite.com.br/videos/minha_mao.flv">Minha Mão</a>

<a href="player.php?titulo=Meu Computador&video= http://www.meusite.com.br/videos/pc.flv">Meu Computador</a>

Obs1.: O programa Macromedia Flash Video Encoder pode não funcionar dando uma mensagem de erro com DirectShow ou QuickTime e etc, isso pode ser resolvido facilmente, baixando e instalando o QuickTime. Se isso não resolver tente reinstalar o Macromedia Flash e Macromedia Flash Video Encoder.

Link para o download do QuickTime: (Clique aqui)

Obs2.: Para testar localmente, você deverá estar em um ambiente de php, há alguns programas já configurados que fazem isso, eu uso o “WAMP Server
(Testei este tutorial nesse programa e deu tudo certo)”, tem mais opções como “Easy PHP(Não testei nesse programa)” e etc.

Obs3.: Só para fixar, o caminho do vídeo deve ser completo para que funcione sem problemas, ex.: http://www.meusite.com.br/videos/video.flv.

Obs4.: Algumas hospedagens podem não funcionar, isso acontece porque o servidor da hospedagem não tem suporte a reprodução do FLV, a solução é reclamar com o suporte da hospedagem ou procurar uma hospedagem que suporte a reprodução do FLV.

E é isso, espero que ajude e que tenham gostado, até a próxima pessoal.
Abraçoooossss!!!

Mais sobre o autor

Email: sou@raphaelbruno.com.br

Site: www.raphaelbruno.com.br

Mais matérias do autor

Gostou da Matéria? Então expresse sua opinião crítica ou sugestiva a respeito dela e poste um comentário.








comentários (5)

01° - Comentários  Bruno comentou:
12 de Janeiro de 2010
Realmente muito bom...
Há tempos eu procurava por isto, e esse tutorial funcionou perfeitamente...
Só gostaria de saber agora, como são feitos os uploads dos videos e automaticamente convertidos para FLV...
02° - Comentários  ebooks-pdf comentou:
18 de Novembro de 2009
Valeu! trabalhou bem! resultou 5*!
03° - Comentários  Filemom comentou:
05 de Novembro de 2009
Legal esse tutorial precisava mesmo de player de video flw bom tutorial
04° - Comentários  Claudenir comentou:
23 de Junho de 2009
Muito bom e fácil de entender, aqui na minha máquina funcionou certinho!!!

Parabéns!
05° - Comentários  rako comentou:
16 de Junho de 2009
Muito Obrigado amigo ótimo post . Abraços

Copyright © Artigos e Tutoriais. Todos os direitos reservados
Ativando e Turbinando sua criatividade

Equipe
Artigos e tutoriais