0 Compartilhamentos 1582 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

As melhores extensões gratuitas para Visual Studio 2022
Artigos
109 visualizações
Artigos
109 visualizações

As melhores extensões gratuitas para Visual Studio 2022

Carlos L. A. da Silva - 20 de janeiro de 2022

Comece o ano com a melhor ferramenta para complementar seu trabalho!

Conhecendo Svelte
Artigos
293 visualizações
Artigos
293 visualizações

Conhecendo Svelte

Carlos L. A. da Silva - 6 de janeiro de 2022

Svelte, React ou Vue? O especialista Josh Collinsworth disserta sobre a solução em seus mínimos detalhes.

Petrobras abre concurso com 757 vagas de nível superior
Artigos
347 visualizações
Artigos
347 visualizações

Petrobras abre concurso com 757 vagas de nível superior

Redação - 30 de dezembro de 2021

Há vagas para cientistas de dados, engenheiros e analistas de sistemas entre outras carreiras. As inscrições permanecerão abertas até o dia 05 de janeiro de 2022.

2 Responses

Deixe uma Resposta para Stefhany Walter Cancelar resposta

Your email address will not be published.

Mais publicações

A história da imagem mais antiga da internet
Artigos
381 visualizações
381 visualizações

A história da imagem mais antiga da internet

Carlos L. A. da Silva - 28 de dezembro de 2021
Coreia do Sul no mapa dos jogos
Artigos
380 visualizações
380 visualizações

Coreia do Sul no mapa dos jogos

Carlos L. A. da Silva - 22 de dezembro de 2021
Rust é o futuro da infraestrutura JavaScript
Artigos
681 visualizações
681 visualizações

Rust é o futuro da infraestrutura JavaScript

Carlos L. A. da Silva - 6 de dezembro de 2021
Influenciadores digitais que não existem
Artigos
661 visualizações
661 visualizações

Influenciadores digitais que não existem

Carlos L. A. da Silva - 2 de dezembro de 2021