Desenvolvimento

1 abr, 2015

Conheça o pacote de ferramentas Mozilla Popcorn

Publicidade

A comunidade web adora visitar portais de filmes como YouTube, Sevenload, Vimeo, Lafango, Wildscreen.tv e outros. O Flash ainda é a tecnologia dominante nesse segmento, quando se trata de streaming de conteúdo multimídia. No lado do cliente, isso requer tanto largura de banda suficiente quanto um plugin para o navegador web utilizado. O HTML5 introduz uma tag de vídeo que tem uma abordagem diferente e suporta a reprodução sem um plugin.

As opções de controle do vídeo não são nada mais do que uma simples barra de controle. Se precisar de mais comodidade, é possível instalar o framework Popcorn.

Desenvolvido pela fundação Mozilla, o Popcorn se propõe a preencher a lacuna entre filmes e conteúdos em outros sites, adicionando funções e controle adicional para os filmes da web. Depois de cerca de 18 meses de desenvolvimento, a versão estável da biblioteca JavaScript Popcorn.js já está disponível e, portanto, pronta para uso em produção.

Utilizar a biblioteca é fácil, ela possui a licença MIT e vem com uma série de trechos de código JavaScript prontos para utilização, que permitem mostrar legendas e links, vincular um filme com o Twitter, Facebook, Flickr e até mesmo integrar outros sites ou feeds ou marcar locais em um mapa do Google. A documentação é exaustiva, enumera todas as opções e explica a sua utilização com numerosos exemplos. Se você quiser experimentar o Popcorn, não precisa ser um especialista em JavaScript ou um experiente desenvolvedor web.

Conhecimentos básicos de HTML são úteis, embora seja importante conhecer os novos elementos HTML5 primeiro – em particular, a nova tag de vídeo. Caso queira modificar o layout para atender às suas próprias necessidades mais tarde, é importante também conhecer CSS (veja o tópico “Popcorn por todo lado”).

Popcorn por todo lado

Para este projeto, você precisa baixar a versão completa 1.1.2 da biblioteca JavaScript (popcorn-complete.js) e o trailer do Sintel em OGV e MP4.

Sintel é um curta de animação gerado por computador criado no âmbito do projeto do filme Durian. Como seu antecessor, Big Buck Bunny, ele foi patrocinado pela Fundação Blender criado com o software gráfico Blender 3D livre.

Antes de começar

O roteiro do filme para um projeto que utiliza Popcorn segue os mesmos conceitos de um site normal com marcação HTML5. Você precisa vincular a biblioteca Popcorn no cabeçalho do arquivo da página para garantir que as funções previstas no quadro de mídia estejam disponíveis no novo site (listagem 1). Para fins de teste, é uma boa ideia usar o arquivo completo com todas as funções e plugins (popcorn-complete.js). A versão mínima (popcorn-complete.min.js) disponível na página de download do projeto é recomendada para uso em produção.

O cabeçalho do arquivo HTML também tem espaço para o arquivo com os trechos de código JavaScript (mypopcorn.js) e um link para a folha de estilo CSS (styles.css). Claro, você pode integrar a formatação diretamente usando <style type=”text/css”>; nesse caso, um arquivo externo mantém as coisas mais fáceis de ler.

Listagem 1: Cabeçalho HTML

01 <html>
02  <head>
03  <title>Linux Magazine 05/2012 ‐‐ Popcorn Article</title>
04  <script type='text/javascript' src='popcorn‐complete.js'></script>
05  <script type='text/javascript' src='mypopcorn.js'></script>
06  <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
07 </head>

Em seguida, é necessário adicionar uma tag de vídeo com uma identificação única (como MyVideo, consulte a listagem 2) a um container div no corpo da página e vincular as versões de vídeo desejado. Atualmente, isso deve ser, pelo menos, OGG (veja o tópico “Tipos de arquivos MIME”) e formatos MP4, porque os fabricantes de navegadores ainda não chegaram a um acordo sobre um padrão uniforme. OGG e MP4 são muito bons para as principais plataformas, no entanto. Se forem oferecidos várias formatos, o navegador vai escolher o formato mais favorável.

Listagem 2: Resumo do arquivo index.html

01 <div id="wrapper">
02  <div id="main">
03  <div id="container">
04 <video id="myvideo" checked="true" controls="controls" poster="poster.png">
05 <source src="sintel_trailer‐480p.ogg" type="video/ogg">
06 <source src="sintel_trailer‐480p.mp4" type="video/mp4">
07 </video>
08 <div id="map"></div>
09  </div>
10  <div id="footnotediv"></div>
11  <div id="attributiondiv"></div>
12  </div>
13  <div id="aside">
14  <div id="wikihead"></div>
15  <div id="wikidiv"></div>
16  <div id="linkdiv"></div>
17  <div id="twitterdiv"></div>
18  </div>
19 </div>

Você também precisa de containers div separados para outros conteúdo (textos, imagens, links de mídia social etc.). Como as legendas são exibidas dentro da área de vídeo, elas não precisam de um container. As notas de rodapé podem compartilhar um container, caso você queira que o navegador os exiba um após o outro. Todos os outros conteúdos usam seu próprio container.

Quadro: Tipos de arquivo MIME

Embora o arquivo OGV disponível no site da Sintel tenha rodado bem quando estava offline, ele não foi executado no Mozilla. Dependendo das configurações do servidor, o formato .ogg é normalmente entregue com o tipo MIME correto, mas .ogv não é.

Para uma solução rápida, apenas renomeie o arquivo .ogv para .ogg, ou você pode criar um arquivo .htaccess em seu servidor web com as seguintes linhas:

# Vídeo
Vídeo AddType / ogg .ogv
AddType video / mp4 mp4
AddType video / x-m4v .m4v

Note que, na listagem 2, a extensão final do arquivo foi alterada de ogv para ogg.

Silêncio no set!

As ações do arquivo JavaScript mypopcorn.js só precisam de algumas linhas de código (veja a listagem 3). Inicialmente, um listener de evento garante que o script não comece até que o navegador tenha terminado o carregamento do site. Todos os elementos do projeto estão incluídos nessa função.

A variável pop cria uma instância do popcorn. O usuário passa o ID das tags de vídeo (MyVideo) para permitir a chamada para o material adicional, seguido por elementos da biblioteca (por exemplo, .subtitle) para adicionar legendas ao trailer Sintel. Os parâmetros estão entre parênteses: as legendas começam em 12 segundos, e terminam em 16 segundos. A definição do local de exibição não é necessária nesse caso porque as legendas são exibidas na parte inferior de um filme, por padrão. Isso não é verdadeiro para as notas de rodapé e outros elementos, os quais contêm os detalhes do container de destino.

Listagem 3: Resumo do arquivo mypopcorn.js

01 document.addEventListener('DOMContentLoaded',function(){
02  var popcorn = Popcorn('#myvideo' );
03 popcorn.subtitle({
04 start: 12,
05 end: 16,
06 text:"
<p>Was führt dich ins
Land der Torwächter?
</p>"
07 });
08 …
09 popcorn.footnote({
10 start: 12,
11 end: 30,
12  text: " The German subtitles
13  target: "footnotediv"
14 });
15 …
16 popcorn.wikipedia({
17 start: 0,
18 end: 48,
19 lang: "en",
20 numberofwords: 59,
21 src: "http://en.wikipedia.org/wiki/Blender_%28software%29",
22 title: "Blender ...",
23 target: "wikidiv"
24 });

O alvo das notas de rodapé é “footnotediv”, que aparece diretamente abaixo do container de vídeo no código HTML (listagem 2). O mesmo se aplica à exibição de um artigo da Wikipédia, uma linha do tempo no Twitter e um mapa do Google. Os nomes dos elementos aqui são fixos e autoexplicativos: .wikipedia, .twitter e .googlemap. Para obter uma lista de todos os plugins do Popcorn e seus exemplos, visite o site do projeto.

Câmeras rodando

Quando conteúdo externo é integrado, a biblioteca remove toda a formatação (por exemplo, parágrafos, marcações, formatação de lista etc.), links, e até mesmo texto entre colchetes. Para o artigo da Wikipedia mostrado no exemplo (figura 1), isso significa que é uma boa ideia usar o seu próprio título e reduzir os numberofwords para que a tabela de conteúdo não seja mais exibida.

 

Vários elementos do Popcorn em ação: na esqueda, o filme com legendas; na direita, um resumo do artigo da Wikipedia para Blender.
Figura 1: Vários elementos do Popcorn em ação: na esquerda, o filme com legendas; na direita, um resumo do artigo da Wikipedia para Blender.

Se o layout de uma página não corresponder ao do seu projeto ou perder a formatação, não é preciso se preocupar. No entanto, é um pouco decepcionante se os links da Wikipédia na tabela de conteúdo forem perdidos. URLs como http://en.wikipedia.org/wiki/Blender_(software)#Features são simplesmente ignoradas pelo Popcorn, e ele realmente precisa desse tipo de recurso para que os usuários possam escolher um trecho que lhes interessa em um texto mais longo.

Quando o filme Sintel termina, o mapa do Google aparece em seu lugar e o feed do Twitter aparece no lugar da informação Wikipedia (figura 2). Por uma questão de rigor, não se esqueça de que você pode integrar filmes diretamente do YouTube ou Vimeo no script. Nesse caso, é possível vincular a URL para o filme, assim não será necessário incluir uma tag de vídeo.

Quando o trailer termina, um mapa do Google com uma exibição dos fabricantes do filme aparece no quadro do vídeo, e a timeline do Twitter dos fabricantes aparece à direita.
Figura 2: Quando o trailer termina, um mapa do Google com uma exibição dos fabricantes do filme aparece no quadro do vídeo, e a timeline do Twitter dos fabricantes aparece à direita.

O Popcorn adiciona automaticamente o código-fonte para a incorporação de um filme, de modo que você pode simplesmente adicionar um recipiente div com o ID. Isso mantém o kit de ferramentas de mídia flexível com suporte inclusive para conteúdo Flash, que ainda domina a web.

Máquina de pipoca

Os usuários que preferem evitar mexer com código-fonte ou em editores de texto podem contar com ajuda de um ambiente gráfico Popcorn Maker, da Fundação Mozilla. A aplicação web ainda está em estágio alfa de desenvolvimento, mas amplamente utilizável. O front-end é uma reminiscência de um programa de edição de vídeo, e seu manuseio é semelhante a um editor de vídeos, além de muito intuitivo.

O aplicativo é executado em qualquer sistema operacional no navegador Firefox. Basta clicar em iniciar o aplicativo na página web e o editor do Popcorn é iniciado. A primeira coisa que você precisa fazer é escolher um título para o novo projeto e digitar a URL do filme. Em seguida, você decide sobre um dos templates, para que os elementos de biblioteca disponíveis sejam vinculadas. A linha do tempo abaixo do filme mostra a duração do filme em horas, minutos e segundos, em um formato 00:00:00 – muito parecido com os mostrados em programas populares de edição de vídeo. A caixa à direita contém os widgets disponíveis, que você pode arrastar e soltar para a linha do tempo e dizer ao Popcorn Maker para criar uma nova faixa. Outros módulos são então adicionados à mesma faixa ou à uma nova faixa.

Ao clicar na borda direita ou esquerda de um elemento, será possível arrastá-lo para alongar ou encurtar sua linha do tempo. Isso abre um diálogo para ediçãoo do evento, onde se pode ajustar os resultados de uma forma mais granular (por exemplo, determinar o comprimento com uma precisão de um único segundo, adicionar um link ou uma fonte e especificar o container de destino). Os resultados são visíveis diretamente no aplicativo web.

Uma função de exportação arredonda a coisa toda. O ícone do pequeno disquete no canto superior direito permite salvar o código-fonte em JavaScript Object Notation (JSON) ou no formato HTML (figura 3). Você pode, em seguida, copiar e colar esse código em seu editor favorito. Até o momento, não é possível fazer o download do código-fonte, nem salvar seus próprios projetos online.

Figura 3: O Popcorn Maker é uma ferramenta baseada na web que permite que os usuários trabalhem com a biblioteca JavaScript Porcorn.js sem quaisquer habilidades em programação.
Figura 3: O Popcorn Maker é uma ferramenta baseada na web que permite que os usuários trabalhem com a biblioteca JavaScript Porcorn.js sem quaisquer habilidades em programação.

 

Ação!

Com seu Framework Popcorn, os desenvolvedores da Mozilla oferecem uma nova linha de ferramentas para diversão cinematográfica e ferramentas interessantes para web designers e outras almas criativas. Para desenvolvedores JavaScript experientes, esse é um campo a ser explorado unindo filmes da web e conteúdo multimídia. No entanto, mesmo os usuários com conhecimentos de programação limitados, em breve se sentirão em casa e alcançarão resultados atraentes com pouco esforço.

E como uma cereja no topo do bolo, os fabricantes oferecem uma diversificada paleta de ferramentas a partir das quais os usuários podem arrastar elementos em seus próprios projetos. Embora o Popcorn Maker deixe claro que o projeto ainda está em versão alfa, você já pode usar o código-fonte exportado como um modelo para seu próprio trabalho de desenvolvimento e, em seguida, continuar a experimentar variações em seu editor de código favorito.