Como Inserir Vídeo em HTML

#webdev #html #beginners #braziliandevs

Nesse artigo, vamos aprender qual tag usamos para criar um elemento de vídeo em HTML, bem como conhecer os atributos que irão definir como o vídeo irá se comportar.

Já revelando o segredo, para adicionar vídeos em um documento HTML é necessário usar a tag video. Primeiro criamos a tag de video e depois adicionamos o atributo controls para exibir um controle de reproduçã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>