Vídeo HTML5

HTML5 Rocks

Introdução

A tag de vídeo é um dos recursos de HTML5 que mais chamam atenção. Geralmente apresentada como uma alternativa ao Flash na mídia, a tag de vídeo, na verdade, vai muito além disso. Embora ela só tenha se juntado recentemente ao restante das infindáveis tags HTML, seus recursos e compatibilidade com navegadores vêm aumentando a uma velocidade extraordinária. Como você verá neste tutorial, sua principal vantagem é a integração natural com as outras camadas da pilha de desenvolvimento da web, como, por exemplo, CSS e JavaScript, bem como as outras tags HTML.

Este tutorial fornece uma noção básica da tag de vídeo e também mostra vários exemplos de diferentes integrações com outros recursos HTML5, como, por exemplo, <canvas>.

1. Marcação

As linhas a seguir devem ser suficientes para que um vídeo HTML funcione em seu site.

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Este snippet usa a tag <source>, que permite incluir vários formatos como tipos de alternativa caso o navegador do usuário não seja compatível com um deles. Veja mais informações sobre isso na próxima seção.

Você também pode usar um único formato de vídeo, o que resultará em uma sintaxe muito semelhante à da tag de imagem. Essa sintaxe será a mais usada em um futuro próximo, quando todos os navegadores suportarem o mesmo formato de vídeo.

<video src="movie.webm"></video>

Por enquanto, vamos nos concentrar no primeiro caso, que é o mais comum atualmente. O mais importante a ser lembrado é certificar-se de que o servidor esteja veiculando arquivos de vídeo com o tipo MIME correto no cabeçalho Content-Type. Se não estiver, os vídeos podem não funcionar corretamente, mesmo que estejam funcionando em uma cópia local do site. Em um httpd.conf do Apache, basta adicionar estas linhas:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Se o aplicativo estiver sendo veiculado em um aplicativo Google App Engine, será necessário adicionar algo assim a app.yaml (um para cada formato):

- url: /(.*\.ogv)
  static_files: videos_folder/\1
  mime_type: video/ogg
  upload: videos_folder/(.*\.ogv)

Para melhorar o desempenho do cliente, é importante lembrar-se de especificar o atributo type nas tags de origem ao lidar com vários formatos. Dessa forma, o navegador pode decidir de qual formato pode fazer download e, depois, executar. Em outras palavras, ele só fará download daqueles que puder executar, para aumentar o desempenho do site.

2. Formatos de vídeo

Pense em um formato de vídeo como um arquivo zip com transmissões de vídeo e de áudio codificadas. Os três formatos com os quais você deve se preocupar para a web são webm, mp4 e ogv:

  • .mp4 = H.264 + AAC
  • .ogg/.ogv = Theora + Vorbis
  • .webm = VP8 + Vorbis

A velocidade da evolução da tag de vídeo é realmente interessante. Há apenas um ano, o único navegador que suportava a tag de vídeo em sua versão estável era o Safari. Agora, todos os navegadores modernos suportam vídeo HTML5, inclusive o IE9, que está para ser lançado à época desta publicação. Quanto aos codecs, o Firefox, o Google Chrome e o Opera concordaram em incluir suporte para .webm como formato de vídeo comum por meio do Projeto WebM. O Internet Explorer também oferecerá suporte se o codec for instalado no computador (esperamos que isso deixe de ser necessário no futuro).

Observação: até a data em que este artigo foi escrito, o Safari não oferece suporte ao formato .webm.

Aqui você pode ver como seu navegador só pode processar um ou dois dos três formatos mencionados (só com muita sorte você verá os três).:

Na época em que este artigo foi escrito (agosto de 2010), este é o snippet que tem a combinação mais segura de formatos para que seu vídeo seja exibido em todos os navegadores:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Observação: devido a um bug no iPad, será necessário colocar .mp4 como a primeira opção para carregar o vídeo nesse dispositivo. Isto é, até que o bug seja corrigido.

Como já foi dito, quase todos os fornecedores de navegadores concordaram em oferecer suporte a um formato de vídeo comum. Assim, em menos de um ano, este será o código que muito provavelmente será usado na Web:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Uma das principais preocupações em relação ao uso do formato .mp4 é que seu codec de vídeo (h.264) não é um codec aberto, e as licenças que uma empresa teria que pagar para usá-lo são muito complexas para serem entendidas. Mais informações sobre esse formato estão disponíveis neste capítulo de vídeo.

Outro problema do formato .mp4 é que o atributo type precisa ser mais específico que outros formatos, conforme o perfil usado para codificar o vídeo. Embora o mais comum seja "avc1.42E01E, mp4a.40.2", verifique esta lista de perfis para ter certeza.

Embora a Microsoft tenha anunciado o suporte da tag de vídeo, bem como de outros elementos HTML5, na próxima versão do IE (IE9), a taxa de migração de usuários a versões mais recentes é menor que a de outros grandes navegadores. O que nos leva à próxima seção:

3. O que acontece com as versões atuais do IE que não são compatíveis com a tag de vídeo?

Flash como segunda opção

Você também pode usar o Flash como segunda opção. Dependendo do formato de seu vídeo, talvez seja necessário codificá-lo novamente para um formato compatível com Flash Player. A boa notícia é que a Adobe se comprometeu a oferecer suporte ao formato webm no Flash Player, embora, neste momento, isso ainda não esteja claro. A maior desvantagem desta solução em comparação com o plug-in do Google Chrome Frame é que você terá o Flash Player como a versão ultrapassada de qualquer interface de usuário personalizada ou quaisquer recursos avançados que você tenha criado para sua tag de vídeo. Os detalhes desta técnica podem ser consultados no tutorial Quick Guide to Implementing the HTML5 Audio (Guia rápido de implementação de áudio do HTML5).

4. Codifique seus vídeos

Para codificar seus vídeos já existentes nos formatos mencionados na seção anterior, use Miro Converter para Windows e Mac e obtenha com facilidade o formato necessário. O programa não permite ajustar muitas configurações, mas vem com as saídas mais comuns da Web, inclusive os três formatos usados neste tutorial. Olhando bem, este software é, na verdade, um wrapper para ffmpeg e ffmpeg2theora que pode ser usado no Windows, Mac e Linux na linha de comando para especificar mais parâmetros. Leia mais sobre esta ferramenta em divintohtml5.org.

5. A parte divertida

Como dissemos na introdução, a principal vantagem de ter a tag de vídeo como um membro da família HTML5 é a integração com outras camadas da pilha de desenvolvimento web. Nos exemplos a seguir, oferecemos uma visão geral do que é possível fazer com ela.

5.1. Vídeo + outro HTML

Todos os atributos comuns do HTML agora podem ser usados no Google Video Player. Por exemplo, no snippet a seguir, estamos usando tabindex para tornar o teclado do player acessível. Podem ser usados novos atributos na tag de vídeo que também são comuns à tag de áudio, como, por exemplo, loop e autoplay; ambos são autoexplicativos. O atributo poster indica qual imagem será mostrada quando o vídeo estiver começando a ser carregado, e controls é usado para indicar que, em vez de criar nossos controles personalizados, queremos que o navegador renderize alguns automaticamente para nós. Há também um atributo preload que podemos usar para fazer download do vídeo em segundo plano assim que a página for carregada, mesmo que a reprodução não tenha sido iniciada.

<video poster="star.png" autoplay loop controls tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

O nível completo de integração da tag de vídeo como um elemento do navegador nativo resolve alguns dos problemas que você pode ter tido no passado com players incorporados de terceiros, como, por exemplo, sobreposição de menus suspensos e de iframes no player ou comportamento estranho do layout quando os outros elementos HTML relacionados ao vídeo eram dinamicamente redimensionados.

Como o vídeo não é tratado como um objeto estranho incorporado, outras vantagens afetam a experiência do usuário. Por exemplo, mesmo que o foco esteja no próprio player, ações como, por exemplo, rolagem de páginas ou pressionamento de teclas do teclado serão completamente funcionais.

Observação: se você estiver tentando gravar documentos em vários idiomas para manter a sintaxe XHTML no contexto do HTML5, os atributos em seu código serão assim:

<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

5.2. Vídeo + JS

A tag de vídeo vem com um conjunto de atributos e métodos que permite fazer um controle mais preciso do vídeo com o código JS. Você pode vê-los em tempo real no exemplo a seguir.

Assim como qualquer outro elemento HTML, você pode anexar eventos comuns à tag de vídeo como, por exemplo, eventos de arrastar, eventos de mouse, eventos de foco, etc. Mas o elemento de vídeo vem com uma série de novos eventos que precisam ser detectados (e controlados) quando o vídeo é reproduzido, pausado ou encerrado. Como o carregamento de um recurso de vídeo pode ter várias limitações, há muitos eventos que permitem um controle mais preciso do processo de carregamento, tanto em nível de rede (loadstart, progress, suspend, abort, error, emptied, stalled) como em nível de buffer (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough).

No nível mais simples, você pode anexar o evento canplay para começar a trabalhar com o vídeo.

video.addEventListener('canplay', function(e) {
  this.volume = 0.4;
  this.currentTime = 10;
  this.play();
}, false);

Vários controles personalizados do player estão disponíveis na Internet neste exato momento. No exemplo a seguir, usamos alguns elementos para controlar dois vídeos simultaneamente e simular o efeito de avanço com o atributo playbackRate. Use a barra deslizante para alternar o volume entre os vídeos.

5.3. Vídeo + CSS

Como você pode supor, a tag de vídeo pode ser personalizada usando CSS convencional (por exemplo, borda, opacidade, etc.), uma vez que ele é cidadão de primeira classe do DOM. Mas o interessante é que você também pode personalizá-la com as propriedades mais recentes do CSS3 como, por exemplo, reflexos, máscaras, gradações, transformações, transições e animações.

Passe o mouse sobre o próximo vídeo para ver algumas delas em ação.

#video-css.enhanced {
  border: 1px solid white;
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */

  -moz-transform: translate(0, 10px);  /* FF3.5+ */
  -o-transform: translate(0, 10px);  /* Opera 10.5 */
  -webkit-transform: translate(0, 10px);  /* Saf3.1+, Chrome */
}

5.4. Video + canvas

Canvas é outro elemento HTML5 com muitas possibilidades quando usado com a tag de vídeo.

No exemplo a seguir, exploramos dois recursos do elemento <canvas> para importar e exportar imagens. O primeiro deles é o método drawImage, que permite importar imagens de três fontes diferentes: um elemento image, um elemento canvas e um elemento <video>! Isso significa que toda vez que executamos esse método, o quadro atual do vídeo é importado e processado no canvas.

O segundo recurso da tag <canvas> que estamos usando é o método toDataURL, que permite exportar o conteúdo do canvas para uma imagem. Clique em Reproduzir no vídeo a seguir para ver como uma imagem é criada no vídeo a cada 1,5 segundo. O canvas que usamos para importar/exportar, na verdade, fica escondido.

Você pode ver no código a seguir como criamos um intervalo a cada 1,5 segundo com o método drawImage, que toma o elemento video como origem.

video_dom.addEventListener('play', function() {
  video_dom.width = canvas_draw.width = video_dom.offsetWidth;
  video_dom.height = canvas_draw.height = video_dom.offsetHeight;
  var ctx_draw = canvas_draw.getContext('2d');
  draw_interval = setInterval(function() {
    // import the image from the video
    ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
    // export the image from the canvas
    var img = new Image();
    img.src = canvas_draw.toDataURL('image/png');
    img.width = 40;
    frames.appendChild(img);
  }, 1500)
}, false);

No exemplo a seguir, avançamos mais uma etapa. Se você aumentar a frequência com que importa e processa a imagem do vídeo, poderá até simular a mesma taxa de quadros do vídeo no canvas. Isso permite realizar todos os tipos de transformações no canvas como se estivesse fazendo no vídeo.

No lado esquerdo, vê-se a reprodução do vídeo original. No centro, há um canvas que usamos para importar as imagens a cada 33 milissegundos. No lado direito, há um segundo canvas que sofrerá todas as transformações ao mesmo tempo em que importa as imagens do primeiro canvas. O único motivo pelo qual estamos usando dois canvas é porque o desempenho é muito melhor que usar um único canvas que importe as imagens e as transformações ao mesmo tempo.

A mesma técnica da importação de imagens também pode ser aplicada a WebGL. Com o WebGL você pode, por exemplo, importar os quadros de um vídeo e processá-los em um cubo 3D em giro. Mais detalhes sobre tais implementações estão disponíveis no website do MDC.

5.5. Vídeo + SVG

O SVG fornece uma maneira programática de renderizar e manipular gráficos vetoriais, mas também vem com mais recursos, como, por exemplo, efeitos de filtros SVG. Com esses filtros, você pode focar um elemento DOM específico e aplicar alguns dos efeitos prontos para uso, como, por exemplo, desfoque, composto, blocos, etc. No momento em que este artigo foi escrito (agosto de 2010), o Firefox 4 e o IE9 ofereciam suporte a SVG embutido, que permite segmentar o elemento de vídeo com HTML e CSS (nesse exemplo, usamos JavaScript e canvas para fazê-lo funcionar em navegadores que ainda não suportam SVG embutido):

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <defs>
    <filter id="myblur"> 
      <feGaussianBlur stdDeviation="1" /> 
    </filter>
  </defs>
</svg>
<style>
  video { filter:url(#myblur); border: 2px solid red; }
</style>

Clique aqui para alternar para filtro de desfoque

Comments

0