Como Fazer Streaming de Vídeo Grátis Pelo Dropbox

3
2794

O Dropbox já é um serviço de armazenamento em nuvem bem conhecido. Com planos gratuitos que partem de 2GB, podendo aumentar muito através de premiações por indicação de novos membros, é uma opção excelente para acessar seus arquivos em qualquer lugar, muito fácil de usar.

Mas uma de suas características, não encontrada com frequência em serviços similares, é poder usá-lo como servidor para streaming de vídeo. Para quem tem videologs ou costuma "embedar" vídeos no blog pode ser a salvação, já que planos baratos de hospedagem de sites teriam a transferência mensal de dados esgotada rapidinho (de acordo com a visualização de seu blog, claro).

Note que há limitações tanto nas contas grátis quanto nas pagas, como veremos mais adiante, mas ainda assim é uma boa ferramenta. Vamos ver como usar sua conta para servir vídeos carregados diretamente nas páginas do seu blog com um trecho de HTML - nada de player em Flash.

1º Crie a conta

Não tem conta no Dropbox? Crie uma. Você começa com 2GB, mas através de indicações de usuários e instalando o software fornecido, ganha mais espaço.

O máximo de espaço grátis que pode-se ganhar com indicações é 16GB, mas há outros meios de aumentar o seu "disco".

Leia também - Como Usar o Dropbox com seu Blog WordPress

2º Crie uma pasta pública

Seus vídeos devem estar numa pasta pública ou não serão visíveis. Clique na pasta "Public" do seu painel e depois no botão New Folder, criando uma pasta dentro dela. Dê-lhe um nome que indique o que guardará.

Se sua conta foi criada depois de Outubro/2012, a pasta Public não existirá por padrão, é preciso habilitar a pasta pública em sua conta.

Pasta pública do Dropbox

Você pode organizar subpastas ali como achar melhor: desde que a "mãe" de todos seja a pasta pública, os vídeos e demais arquivos estarão disponíveis online. Cuidado com o que põe ali!

3º Crie os arquivos

Para exibir os vídeos corretamente em diversos navegadores, você precisa convertê-los em pelo menos dois formatos: WebM e MP4. Não use vídeos em Flash. Crie também uma imagem no formato JPG, GIF ou PNG, que será o preview do vídeo (a imagem estática vista antes do visitante apertar Play).

Não vou me aprofundar no assunto HTML5 e vídeos, mas para ter certeza de que ele rodará bem, você precisará criar ainda uma versão menor do vídeo, com largura máxima de 480 pixels, para os dispositivos como celulares (alguns não aceitam vídeos maiores que isso). Mas só os dois nos formatos indicados já são o bastante para cobrir os principais navegadores em desktops.

Use algum programa que converta vídeos em formatos diversos para criar os seus. Recomendo o Miro Video Converter (gratuito). Testei também o aTubeCatcher e o Format Factory, mas ambos me deram arquivos muito grandes ou que não funcionaram.

Abra o Miro, arraste o arquivo do seu vídeo para cima da janela e escolha o formato em que vai converter. Ao final, você terá os dois vídeos, um em WebM, outro em MP4. Não esqueça de tirar um print de alguma cena do vídeo para criar a imagem de pré-visualização, e salvá-la como JPG, GIF ou PNG.

Janela do Miro Video Converter
Três arquivos criados: dois vídeos e uma imagem estática
Três arquivos criados: dois vídeos e uma imagem estática

4º Envie para o Dropbox

Envie os arquivos para sua conta no Dropbox.

Botão de upload de arquivos no Dropbox

5º Chame os vídeos

Agora é só usar um trecho de HTML para chamar os vídeos. Usando a tag video do HTML5, será definida:

  • a altura e largura (height e width);
  • o carregamento dos botões de controle (controls);
  • o pré-carregamento do vídeo mesmo antes do visitante clicar em Play (preload);
  • o poster, ou endereço para a imagem de pré-visualização. Sem ela, o lugar do vídeo exibe seu primeiro quadro. Fica feio, é recomendável criar a imagem;
  • endereço dos arquivos (sources). Declare ambos, sendo WebM carregado no Firefox e Opera, e MP4 no Chrome, Internet Explorer (acima de 9) e Safari;
  • a mensagem final vai aparecer apenas se nenhum dos formatos puder ser carregado.

Insira na sua página:

<video width="640" height="360" controls preload poster="xxx.jpg"> 
<source src="xxx.mp4"></source> 
<source src="xxx.webm"></source>
Seu navegador não suporta vídeos em html5, atualize-o logo!
</video>

Para obter o endereço dos arquivos, é só clicar com o botão direito sobre ele no Dropbox e selecionar "Copy public link" (copiar link público). Use o link no lugar dos "xxx" do nosso código.

Será que funciona? Veja aí embaixo:

Cuidado com Direito Autoral

Importante lembrar que você não deve sair embedando vídeos protegidos como filmes na íntegra, shows e afins. Não é porque você escapou das regras do YouTube que pode fazer gandaia no Dropbox: corre o risco de ter sua conta banida por violação de copyright.

Limites de Transferência

Segundo as regras do Dropbox, o limite mensal para contas grátis é de 20GB, suficiente para sites e blogs de menor porte. Se seu projeto é de maior tráfego e vai consumir mais recurso, é melhor obter uma conta premium, que elevará essa tranferência para 200 GB/mês.

O estouro desse limite causará o bloqueio do arquivo, e todas as requisições serão direcionadas a uma página de erro.

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

3 COMENTÁRIOS

  1. Excelente publicação, só o fato do bizu de habilitar a pasta public do dropbox já foi pro dez, rs... revirei a ajuda do dropbox e não estava encontrando isso...
    No mais muito interessante o tutorial, vou tentar fazer no meu blog.
    Valeu abração.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui