O HTML5 é a versão mais recente do HTML. Ao contrário das versões anteriores do HTML, o HTML5 permite que os desenvolvedores adicionem facilmente vídeos a páginas web com uma tag de vídeo.
Após ler este artigo, você será capaz de:
Conteúdo relacionado
Assine o theNET, uma recapitulação mensal feita pela Cloudflare dos insights mais populares da internet.
Copiar o link do artigo
HTML5 é a versão mais recente da Linguagem de Marcação de Hipertexto (HTML), uma linguagem de codificação para formatação de conteúdo na internet. Todas as páginas web usam HTML para informar aos navegadores como exibir seu conteúdo. Comparado às versões anteriores do HTML, o HTML5 possui vários recursos adicionais, um dos quais é a capacidade de adicionar vídeos a uma página web. Outros recursos do HTML5 incluem suporte para gráficos SVG, tags para definir a navegação em um site e tags de cabeçalho e rodapé.
O elemento de vídeo HTML5 diz ao navegador para carregar um arquivo de vídeo de outra fonte especificando a localização do arquivo de vídeo, semelhante à forma como um navegador carrega um arquivo de imagem (a imagem em si não é armazenada no arquivo HTML — o navegador a extrai de outro lugar). Largura, altura e outros atributos também podem ser incluídos para informar ao navegador como exibir o vídeo. Outro código de marcação pode informar ao navegador onde colocá-lo na página.
A tag de vídeo HTML5 é <video> e a tag é fechada, semelhante a outros elementos HTML, com </video>.
Entre essas tags, uma tag <source> indica a localização do arquivo de vídeo. Dentro desta tag, tanto a fonte do vídeo (src) quanto o tipo de arquivo (type) são indicados assim:
<video>
<source src="example.mp4" type="video/mp4">
</video>
Os seguintes atributos importantes também podem estar dentro da tag <video>
width="370"controles à tag <video> para incluí-los.Fontes alternativas para o vídeo também podem ir entre as tags <video> caso um navegador não suporte o primeiro formato de arquivo. Os navegadores sempre usam a primeira fonte listada.
Além disso, o texto pode ser colocado entre as tags <video>; este texto é exibido apenas se o navegador do usuário não suportar vídeo HTML5.
Juntando tudo, o código HTML5 para um vídeo incorporado pode ter esta aparência:
<video controls width="370" height="130">
<source src="example.mp4" type="video/mp4">
<source src="alternate-example.webm" type="video/webm">
Seu navegador não é compatível com vídeo HTML5.
</video>
Vários outros atributos, como autoplay (para reproduzir o vídeo assim que a página carregar), loop (para fazer loop de vídeos), muted (para silenciar vídeos) e poster (para mostrar uma imagem antes que o vídeo seja carregado), também podem ser usados no elemento de vídeo. A Mozilla tem uma boa documentação sobre esses atributos.
O HTML5 não é um protocolo de streaming. Sites criados com HTML5 podem usar vários protocolos de streaming diferentes para reproduzir vídeos, incluindo streaming ao vivo HTTP (HLS) e MPEG-DASH. Isso é configurado no lado do servidor, não no código de marcação HTML.
Todos os principais navegadores são compatíveis com HTML5, o que significa que eles podem interpretar tags HTML5 que não faziam parte de versões anteriores do HTML. No entanto, nem todos os navegadores são compatíveis com todos os recursos do HTML5. Os desenvolvedores devem ter em mente que alguns usuários podem ter uma versão desatualizada de um navegador que não pode interpretar o elemento de vídeo HTML5.
Antes do lançamento do HTML5 em 2008, os vídeos eram incorporados com mais frequência usando o plug-in Adobe Flash. O HTML5 permitiu que os desenvolvedores incorporassem vídeos em páginas web usando apenas algumas tags HTML, eliminando a necessidade de um plug-in. Como resultado, o Flash se tornou menos necessário e a Adobe finalmente parou de oferecer suporte ao Flash em 31 de dezembro de 2020.
Hoje, a maioria dos usuários pode fazer streaming de vídeos sem um plug-in de navegador adicional e os desenvolvedores podem usar vários métodos para incorporar vídeos sem depender de um plug-in . O elemento de vídeo HTML5 é um dos métodos mais usados para fazer isso.
Um plug-in de navegador é um software que adiciona um recurso a um navegador que não está incluído de outra forma. Antigamente, os navegadores não incluíam a capacidade de reproduzir vídeo. Plugins de terceiros como o Adobe Flash ajudaram a preencher essa lacuna.
No entanto, os plugins também podem apresentar uma ameaça à segurança. Eles oferecem mais uma superfície de ataque, uma maneira adicional de invasores externos comprometerem uma sessão de navegação, além das superfícies de ataque apresentadas pelo navegador e pelo site. Além disso, os plug-ins podem diminuir a funcionalidade da página. Confiar em plug-ins significa que não apenas um, mas vários softwares precisam funcionar de maneira adequada e rápida para carregar uma página web.
Se um vídeo for incorporado nativamente, o que é possível em HTML5, ele será carregado mais rapidamente. Evitar o uso de um plug-in também é mais seguro.
O Cloudflare Stream é uma plataforma de vídeo sob demanda que combina codificação, armazenamento, entrega e reprodução de vídeo. Consulte a documentação do Cloudflare Stream para saber como carregar arquivos de vídeo para o Stream e incorporá-los em páginas web. Ou saiba mais sobre o Cloudflare Stream antes de começar.