Adicionando Vídeos em HTML

Os vídeos são elementos interessantes que se tornaram ainda mais especiais com a popularização de plataformas de streaming e redes sociais, e para adicionar vídeos em um documento HTML usamos a tag <video>.

Primeiro vamos criar a tag de <video> e definimos a resolução do vídeo na página como 640 pixels de largura e 360 pixels de altura, também iremos adicionar um atributo controls para exibir um controle de reprodução do vídeo em questão.

<video width="640" height="360" controls>

</video>

Em seguida, adicionamos a tag <source> com o caminho do arquivo de vídeo.

Um detalhe interessante, também podemos adicionar mais de um arquivo com uma extensão diferente como medida de segurança, o HTML irá considerar o primeiro arquivo suportado.

Nesse caso, iremos adicionar um arquivo de extensão .mp4, caso o arquivo não seja suportado ou apresente algum problema, o HTML irá considerar o próximo arquivo .webm.

Por fim, caso nenhum dos arquivos sejam suportados no navegador, podemos exibir uma mensagem de texto informado ao usuário o motivo do erro.

<video width="640" height="360" controls>
  <source src="./videos/landscape.mp4" type="video/mp4" />
  <source src="./videos/landscape.webm" type="video/webm" />
  O seu navegador não suporta a tag de vídeo
</video>

Os arquivos de vídeo suportados pelo navegador são:

• MP4
• OGG
• WebM

Também usamos o atributo type na tag <source> para informar ao navegador o tipo de arquivo que está sendo usado, é uma boa forma de manter o HTML semântico.

Esse será o resultado:

Atributos da Tag de Vídeo

Além do atributo controls, podemos incluir outros atributos na tag <video>:

• muted determina que o vídeo esteja mutado
• loop determina que o vídeo seja reproduzido em loop
• autoplay determina que o vídeo seja reproduzido automaticamente
• poster exibe uma imagem enquanto o vídeo está carregando ou até que o usuário aperte o play

<video width="640" height="360" controls poster="./img/play.jpg">
  <source src="./videos/landscape.mp4" type="video/mp4" />
  <source src="./videos/landscape.webm" type="video/webm" />
  O seu navegador não suporta a tag de vídeo
</video>

No código acima, adicionamos o atributo poster que exibe uma imagem até que o usuário reproduza o vídeo. O resultado será esse:

Esse artigo abordou

• Tag video
• Tag source
• Atributos da tag video

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/