0 Compartilhamentos 1381 Views 2 Comments

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.

Carregando...

Você pode se interessar

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada
Artigos
92 visualizações
Artigos
92 visualizações

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada

Carlos L. A. da Silva - 23 de novembro de 2021

Aplicativo oficial do sistema educacional da capital Suécia era ruim demais, mas a lei é a lei...

10 recursos HTML5 úteis que você pode não estar usando
Artigos
369 visualizações
Artigos
369 visualizações

10 recursos HTML5 úteis que você pode não estar usando

Carlos L. A. da Silva - 6 de novembro de 2021

O HyperText Markup Language nos acompanha desde os primórdios da web. É o seu tijolo mais básico. Podem surgir novas tecnologias, plugins, frameworks, conteúdo rico, mas o bom e velho HTML continua sendo a base de tudo e aprender seus mais profundos nuances é fundamental para os desenvolvedores. O HTML5 é a implementação atual da […]

O Metaverso está vindo?
Artigos
432 visualizações
Artigos
432 visualizações

O Metaverso está vindo?

Carlos L. A. da Silva - 1 de novembro de 2021

Mark Zuckerberg anunciou publicamente o desenvolvimento de um metaverso e está orientando toda sua empresa nessa direção... mas essa não é uma ideia inédita e talvez nem seja boa.

2 Responses

Deixe um Comentário

Your email address will not be published.

Mais publicações

Por que eu decidi não migrar para o Windows 11 agora
Artigos
550 visualizações
550 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021
Sir Clive Sinclair, o homem adiantado no tempo
Artigos
839 visualizações
839 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021
A cibersegurança por trás das vacinas
Artigos
925 visualizações
925 visualizações

A cibersegurança por trás das vacinas

Carlos L. A. da Silva - 7 de setembro de 2021