HTML5
Categorias

Usando Vídeos com HTML 5

Até o HTML 4.0, colocar arquivos de vídeo em uma página era uma tarefa bem complicada, se você queria total compatibilidade com os navegadores. Não apenas era necessário inserir o vídeo dentro de um arquivo Flash como também era preciso fazer um código que contemplasse dois tipos diferentes de interpretação de objetos:


	
	

Uma das grandes novidades do HTML 5 é seu suporte natural para vídeo e áudio. As tags <audio> e <video> permitem que você execute arquivos de mídia diretamente nos navegadores com suporte para HTML 5 sem a necessidade de um plugin de terceiros. Atualmente, isso engloba Internet Explorer 9+, Firefox 3.6+, Opera 10.6+, Chrome 6+ e Safari 5+. Ou seja, 92,9% do mercado de navegadores, de acordo com o W3Schools.

Os elementos da interface do arquivo de mídia também se tornam parte do DOM, de forma que você pode criar seus próprios controles de mídia, adicionar legendas e sincronizar eventos de Javascript com a execução do arquivo.

E, vamos combinar, o código ficou bem mais simples agora:

Mas, a vida de um desenvolvedor web nunca é realmente fácil. Novamente, há uma dissonância entre os fabricantes de navegadores a respeito de qual padrão adotar. Desta vez, a confusão está no codec escolhido. Ainda que a especificação de <audio> e <video> tenha sido definida pela W3C, não foi determinado um codec universal.

Como resultado, temos IE, Chrome e Safari com suporte integral para arquivos em MP4 codificados com H.264. Já Firefox e Opera não são compatíveis com MP4 e suportam o formato aberto Theora ou Vorbis em arquivos Ogg. Que também é suportado pelo Chrome. Para complicar ainda mais existe o formato WebM, que roda em Chrome, Firefox e Opera. Confuso? Segue a tabela:

Navegador MP4 WebM Ogg
Internet Explorer 9+ SIM NÃO NÃO
Chrome 6+ SIM SIM SIM
Firefox 3.6+ NÃO SIM SIM
Safari 5+ SIM NÃO NÃO
Opera 10.6+ NÃO SIM SIM

Então, você precisará gerar múltiplos arquivos para um único vídeo. O lado bom do HTML 5 é que você não terá que utilizar nenhum tipo de detecção de navegador ou programação para oferecer a versão correta porque a especificação permite que nós listemos uma série de arquivos para um vídeo e o próprio navegador irá automaticamente reproduzir somente o primeiro formato compatível que encontrar:


Para facilitar a tarefa de gerar múltiplas versões do seu vídeo, existem ferramentas gratuitas como o Miro Video Converter.

Mas, e se o navegador do usuário for uma daquelas exceções que não tem qualquer suporte para as tags <audio> e <video>? Nós podemos reutilizar as mesmas técnicas do passado:


Você também é livre para exibir uma mensagem de erro para o usuário ou exibir uma imagem, até mesmo um GIF animado!


Com a evolução dos navegadores, o uso de tecnologias como Flash ou Silverlight para a exibição de vídeos irá se tornar uma prática do passado.