I
imported_Ryuk
Dseda
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Flowplayer reprodutor de vídeo para páginas Web
Antes de começar, vou esclarecer que este guia foi totalmente feito por mim, extraindo informações da página do FlowPlayer que está à disposição de qualquer um.
Então, sem mais nada a dizer, vamos começar!
Características mais destacadas
A maior porcentagem dos conteúdos de vídeo na Internet hoje em dia está hospedada no YouTube. Mesmo vídeos incorporados em páginas web pessoais ou de empresa são frequentemente hospedados lá. O inconveniente desta abordagem é que as pessoas podem escapar do seu site para o youtube.com, e o logotipo do YouTube é muito destacado e visível, embora na verdade seja o seu site e a marca que você deseja promover é a do nosso próprio site.
Cada aspecto do Flowplayer pode ser ajustado para atender às suas necessidades. Isso inclui tanto seu comportamento quanto a aparência. Você pode ter certeza de que seu reprodutor de vídeo integrado funcionará exatamente da maneira que você quer e que ficará bem sem distrair os usuários.
Plugins
O Flowplayer pode ser estendido com plugins. Alguns plugins permitem, por exemplo, que quando a reprodução do vídeo terminar, ele possa abrir o conteúdo de uma página em HTML, ou aplicar listas de reprodução personalizadas utilizando apenas conhecimentos básicos de HTML.
Scripting
Aqui é onde o Flowplayer realmente se destaca. Nossa API (Uma interface de programação de aplicações ou API (do inglês application programming interface) é o conjunto de funções e procedimentos (ou métodos, na programação orientada a objetos) que oferece certa biblioteca para ser utilizado por outro software como uma camada de abstração. Usados geralmente nas bibliotecas. Para mais características veja em Interface de programação de aplicações - Wikipedia, a enciclopédia livre).
Orientada a objetos e não apenas uma simples lista de funções, que lhe permite vincular funcionalidade personalizada a cada evento de reprodução. E se você é um usuário de jQuery, você ficará encantado pela forma transparente que o Flowplayer e o jQuery trabalham juntos.
Então, ao ver as características que o FlowPlayer tem, vamos à instalação.
1. Baixamos os arquivos do flowplayer que deixarei em anexo.
Nota: A versão a instalar é de licença gratuita e pode ser usada por qualquer um.
2. Subimos a pasta completa chamada “flowplayer” para o diretório do fórum, exemplo /home/user/public_html/flowplayer ou /home/user/public_html/foro/flowplayer
3. Depois de ter subido toda a pasta, verificamos se foi instalada corretamente, vamos ao seguinte endereço.
ou
Se rodar um vídeo com uma animação, é porque já o temos instalado.
4. Agora subimos o vídeo ou os vídeos que queremos reproduzir. (formato .flv) se você não tem vídeos em FLV, precisará de um conversor de vídeo, um muito bom é o Total Video Converter ou se tiverem outro, bom, não importa que conversor usemos, a única coisa que queremos é um formato FLV.
5. Depois de ter subido os vídeos, seja na pasta flowplayer ou em uma separada, o importante é saber o caminho dele, agora vamos colocar o HTML que nos mostrará o reprodutor com o vídeo.
Agora temos várias opções de onde colocar este vídeo, uma delas é usá-lo no portal, a outra, se quiser usar em um post, podemos transformá-lo em BBcode, já que o reprodutor, além de reproduzir vídeo do nosso servidor, pode reproduzir de outras páginas, mas com a vantagem de que será nosso reprodutor e não mostrará logotipos de outras páginas. Desde que o vídeo de outra página esteja em formato FLV.
6. Para transformá-lo em BBcode, vamos ao Admincp -> Códigos BB -> Adicionar novo código BB.
Título: Flowplayer
Etiqueta: flow
Substituir:
Exemplo: [flow]nomedovideo.flv[/flow]
Usar option: Não
Pronto e salvem.
7. Agora que já temos nosso reprodutor, é hora de personalizá-lo, por exemplo, colocar uma imagem de início como pode ser o logotipo do nosso fórum, mudar a barrinha que aparece embaixo por uma que gostemos, etc.
A primeira coisa que vamos fazer é colocar uma imagem própria, um exemplo disso é ver nos demos do FlowPlayer Initial splash image (em inglês).
Então preparamos nossa imagem de 425px × 300px, por exemplo.
Já que temos nossa imagem, a subimos para nosso servidor por FTP onde quisermos, mas sempre lembrando o caminho da imagem, neste caso vou subi-la para a pasta flowplayer localizada onde subi o resto dos arquivos do FlowPlayer, agora só precisamos do código HTML que é o seguinte:
Este código colocamos no HTML do vídeo (visto no passo 5 e 6), deixamos antes do </a>, deveria ficar assim.
Pronto, já temos nosso reprodutor com uma imagem personalizada.
Para saber mais sobre o reprodutor e suas configurações, visite o demo de configuração player. Flowplayer - Flash Video Player for the Web (em inglês)
Para saber sobre os clips Flowplayer - Flash Video Player for the Web (em inglês)
Para saber mais sobre a lista de reprodução Flowplayer - Flash Video Player for the Web (inglês)
Para a configuração de plugins Flowplayer - Flash Video Player for the Web (inglês)
Tenha em conta que, para tornar este guia mais curto, dei a forma de instalação e coloquei o endereço da página oficial para configurar os plugins.
Se tiver problemas com algum passo da instalação e configuração, é só perguntar nos posts e tentarei te ajudar no que for possível.
Recomendo que, por enquanto, interajam com o reprodutor sem instalar plugins, até que saibam todas as funções e saibam o que fazem.
Mas se você sabe JavaScript e se vira em HTML, convido você a ir além e compartilhar conosco seus conhecimentos, pois isso ajuda a todos.
Este guia não infringe nenhum direito autoral, já que a informação está à disposição de qualquer um e a licença deste produto é gratuita, portanto, pode ser usada por qualquer um.
SE desejar adicionar mais funções, visite a página do FlowPlayer onde terá acesso a todas as suas características gratuitamente, seja para plugins e JavaScript.
http://flowplayer.org
Espero que este guia tenha servido, já que foi um pedido de um usuário do vBHispano e a fiz com muito gosto para quem desejar utilizar.
Abraços e Sorte! 🙂
Antes de começar, vou esclarecer que este guia foi totalmente feito por mim, extraindo informações da página do FlowPlayer que está à disposição de qualquer um.
Então, sem mais nada a dizer, vamos começar!
Características mais destacadas
A maior porcentagem dos conteúdos de vídeo na Internet hoje em dia está hospedada no YouTube. Mesmo vídeos incorporados em páginas web pessoais ou de empresa são frequentemente hospedados lá. O inconveniente desta abordagem é que as pessoas podem escapar do seu site para o youtube.com, e o logotipo do YouTube é muito destacado e visível, embora na verdade seja o seu site e a marca que você deseja promover é a do nosso próprio site.
Personalização
Cada aspecto do Flowplayer pode ser ajustado para atender às suas necessidades. Isso inclui tanto seu comportamento quanto a aparência. Você pode ter certeza de que seu reprodutor de vídeo integrado funcionará exatamente da maneira que você quer e que ficará bem sem distrair os usuários.
Plugins
O Flowplayer pode ser estendido com plugins. Alguns plugins permitem, por exemplo, que quando a reprodução do vídeo terminar, ele possa abrir o conteúdo de uma página em HTML, ou aplicar listas de reprodução personalizadas utilizando apenas conhecimentos básicos de HTML.
Scripting
Aqui é onde o Flowplayer realmente se destaca. Nossa API (Uma interface de programação de aplicações ou API (do inglês application programming interface) é o conjunto de funções e procedimentos (ou métodos, na programação orientada a objetos) que oferece certa biblioteca para ser utilizado por outro software como uma camada de abstração. Usados geralmente nas bibliotecas. Para mais características veja em Interface de programação de aplicações - Wikipedia, a enciclopédia livre).
Orientada a objetos e não apenas uma simples lista de funções, que lhe permite vincular funcionalidade personalizada a cada evento de reprodução. E se você é um usuário de jQuery, você ficará encantado pela forma transparente que o Flowplayer e o jQuery trabalham juntos.
Então, ao ver as características que o FlowPlayer tem, vamos à instalação.
1. Baixamos os arquivos do flowplayer que deixarei em anexo.
Nota: A versão a instalar é de licença gratuita e pode ser usada por qualquer um.
2. Subimos a pasta completa chamada “flowplayer” para o diretório do fórum, exemplo /home/user/public_html/flowplayer ou /home/user/public_html/foro/flowplayer
3. Depois de ter subido toda a pasta, verificamos se foi instalada corretamente, vamos ao seguinte endereço.
Inserir CODE, HTML ou PHP:
http://www.tusitio.com/flowplayer/example/index.html
Inserir CODE, HTML ou PHP:
http://www.tusitio.com/foro/flowplayer/example/index.html4. Agora subimos o vídeo ou os vídeos que queremos reproduzir. (formato .flv) se você não tem vídeos em FLV, precisará de um conversor de vídeo, um muito bom é o Total Video Converter ou se tiverem outro, bom, não importa que conversor usemos, a única coisa que queremos é um formato FLV.
5. Depois de ter subido os vídeos, seja na pasta flowplayer ou em uma separada, o importante é saber o caminho dele, agora vamos colocar o HTML que nos mostrará o reprodutor com o vídeo.
HTML:
<html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/nombredelvideo.flv" style="display:block;width:425px;height:300px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>6. Para transformá-lo em BBcode, vamos ao Admincp -> Códigos BB -> Adicionar novo código BB.
Título: Flowplayer
Etiqueta: flow
Substituir:
HTML:
<html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/{param}" style="display:block;width:425px;height:300px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>Exemplo: [flow]nomedovideo.flv[/flow]
Usar option: Não
Pronto e salvem.
7. Agora que já temos nosso reprodutor, é hora de personalizá-lo, por exemplo, colocar uma imagem de início como pode ser o logotipo do nosso fórum, mudar a barrinha que aparece embaixo por uma que gostemos, etc.
A primeira coisa que vamos fazer é colocar uma imagem própria, um exemplo disso é ver nos demos do FlowPlayer Initial splash image (em inglês).
Então preparamos nossa imagem de 425px × 300px, por exemplo.
Já que temos nossa imagem, a subimos para nosso servidor por FTP onde quisermos, mas sempre lembrando o caminho da imagem, neste caso vou subi-la para a pasta flowplayer localizada onde subi o resto dos arquivos do FlowPlayer, agora só precisamos do código HTML que é o seguinte:
HTML:
<img src="flowplayer/milogo.jpg" alt="Mi video" />
HTML:
<html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/nombredelvideo.flv" style="display:block;width:425px;height:300px;" id="player"><img src="flowplayer/milogo.jpg" alt="Mi video" /> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>Para saber mais sobre o reprodutor e suas configurações, visite o demo de configuração player. Flowplayer - Flash Video Player for the Web (em inglês)
Para saber sobre os clips Flowplayer - Flash Video Player for the Web (em inglês)
Para saber mais sobre a lista de reprodução Flowplayer - Flash Video Player for the Web (inglês)
Para a configuração de plugins Flowplayer - Flash Video Player for the Web (inglês)
Tenha em conta que, para tornar este guia mais curto, dei a forma de instalação e coloquei o endereço da página oficial para configurar os plugins.
Se tiver problemas com algum passo da instalação e configuração, é só perguntar nos posts e tentarei te ajudar no que for possível.
Recomendo que, por enquanto, interajam com o reprodutor sem instalar plugins, até que saibam todas as funções e saibam o que fazem.
Mas se você sabe JavaScript e se vira em HTML, convido você a ir além e compartilhar conosco seus conhecimentos, pois isso ajuda a todos.
Este guia não infringe nenhum direito autoral, já que a informação está à disposição de qualquer um e a licença deste produto é gratuita, portanto, pode ser usada por qualquer um.
SE desejar adicionar mais funções, visite a página do FlowPlayer onde terá acesso a todas as suas características gratuitamente, seja para plugins e JavaScript.
http://flowplayer.org
Espero que este guia tenha servido, já que foi um pedido de um usuário do vBHispano e a fiz com muito gosto para quem desejar utilizar.
Abraços e Sorte! 🙂
