🎥Tag <video> para adicionar vídeos

A tag <video> incorpora vídeos na web com atributos como controls, autoplay, loop, muted, e poster. <source> para fornecer múltiplos formatos de vídeo, garantindo compatibilidade entre navegadores.

Introdução

A tag <video> em HTML é usada para incorporar vídeos em uma página web. Com esta tag, você pode exibir vídeos diretamente no navegador, sem a necessidade de plugins externos. A tag <video> suporta diversos atributos e elementos filhos para fornecer controles e funcionalidades adicionais.

Estrutura Básica da Tag <video>

<video controls>
  <source src="caminho/para/o/video.mp4" type="video/mp4">
  Seu navegador não suporta a tag de vídeo.
</video>

Atributos Comuns da Tag <video>

1. src:

   • Especifica o caminho do arquivo de vídeo (assim como a tag de imagem).

   • Exemplo:

     <video src="video.mp4" controls></video>

2. controls:

   • Adiciona controles de reprodução (play, pause, volume, etc.) ao vídeo.

   • Exemplo:

     <video src="video.mp4" controls></video>

3. autoplay:

   • Faz o vídeo começar a tocar automaticamente quando a página é carregada.

   • Exemplo:

     <video src="video.mp4" autoplay></video>

4. loop:

   • Faz o vídeo reiniciar automaticamente quando terminar.

   • Exemplo:

     <video src="video.mp4" loop></video>

5. muted:

   • Inicializa o vídeo sem som.

   • Exemplo:

     <video src="video.mp4" muted></video>

6. poster:

   • Define uma imagem a ser exibida antes do vídeo começar a tocar.

   • Exemplo:

     <video src="video.mp4" poster="imagem.jpg" controls></video>

Elemento <source>

O elemento <source> é usado dentro da tag <video> para especificar diferentes arquivos de vídeo que o navegador pode usar. Isso é útil para fornecer vídeos em vários formatos, garantindo compatibilidade entre diferentes navegadores.

Exemplo com Múltiplos Formatos:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg">
  <source src="video.webm" type="video/webm">
  Seu navegador não suporta a tag de vídeo.
</video>