Usando Vídeos com HTML 5
02:47Fresh Young´s
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:
- <object width="640" height="480">
- <param name="movie" value="meuvideo.swf" />
- <embed src="meuvideo.swf" width="640" height="480"></embed>
- </object>
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:
- <video src="meuvideo.mp4" width="640" height="480" />
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 codecescolhido. 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:
- <video width="640" height="480">
- <source src="meuvideo.mp4" type="video/mp4" />
- <source src="meuvideo.ogv" type="video/ogg" />
- <source src="meuvideo.webm" type="video/webm" />
- </video>
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:
- <video width="640" height="480">
- <source src="meuvideo.mp4" type="video/mp4" />
- <source src="meuvideo.ogv" type="video/ogg" />
- <source src="meuvideo.webm" type="video/webm" />
- <object width="640" height="480">
- <param name="movie" value="meuvideo.swf" />
- <embed src="meuvideo.swf" width="640" height="480"></embed>
- </object>
- </video>
Você também é livre para exibir uma mensagem de erro para o usuário ou exibir uma imagem, até mesmo um GIF animado!
- <video width="640" height="480">
- <source src="meuvideo.mp4" type="video/mp4" />
- <source src="meuvideo.ogv" type="video/ogg" />
- <source src="meuvideo.webm" type="video/webm" />
- <p>Desculpe o transtorno, mas seu navegador não pode exibir o vídeo.</p>
- <img src="erro.gif" />
- </video>
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.
0 comentários