Inserção de vídeo: <video>

4.1 Conceitos básicos da tag <video>

A inserção de vídeos em uma página web utilizando o elemento <video> permite reproduzir conteúdos de vídeo direto no navegador. Esse elemento oferece várias opções de configuração da reprodução, incluindo suporte para diferentes formatos, controle através de atributos e métodos JavaScript. Vamos conferir esse elemento em detalhes.

Exemplo mais simples

A tag <video> é usada com o atributo src, que indica o caminho para o arquivo de vídeo. Também dá para adicionar o atributo controls para mostrar os controles padrão, como botões de play, pause e ajuste de volume.

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

Exemplo com várias fontes

Para garantir suporte em diferentes navegadores, dá para especificar várias fontes de vídeo com a tag <source>. Isso permite que o navegador escolha um formato de vídeo que ele suporte.

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

Atributos da tag <video>

• src: indica o caminho para o arquivo de vídeo
• controls: exibe os controles de reprodução
• autoplay: reproduz o vídeo automaticamente ao carregar a página
• loop: repete a reprodução do vídeo ao finalizar
• muted: desativa o som ao carregar
• preload: indica como o navegador deve carregar o vídeo. Opções: none, metadata, auto
• width e height: definem a largura e altura do player de vídeo
• poster: indica a imagem de placeholder que aparece antes de começar a reprodução do vídeo

4.2 Atributos principais

1. Reprodução automática

O atributo autoplay faz com que o arquivo de vídeo comece a ser reproduzido automaticamente assim que a página é carregada. Assim como no caso de áudio, é bom usar esse atributo com cuidado para não irritar os usuários.

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

2. Loop de vídeo

O atributo loop indica que o arquivo de vídeo deve ser reproduzido em looping infinito. Isso é útil para vídeos de fundo ou animações.

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

3. Desativar som

O atributo muted desativa o som do arquivo de vídeo ao carregar. Isso pode ser útil se você quiser que o vídeo seja reproduzido sem som por padrão, e o usuário possa ligar o som se precisar.

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

4. Pré-carregamento

O atributo preload indica ao navegador como ele deve carregar o arquivo de vídeo ao carregar a página. Ele pode ter um de três valores:

• none: o navegador não deve pré-carregar o vídeo
• metadata: o navegador deve carregar só os metadados (duração, dimensões, etc.)
• auto: o navegador deve carregar o vídeo completo quando a página for carregada

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Poster

O atributo poster indica a imagem de placeholder que aparece antes de começar a reprodução do vídeo. Isso pode ser útil para dar ao usuário uma informação visual sobre o conteúdo do vídeo.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Formatos de vídeo suportados

Para garantir compatibilidade entre diferentes navegadores, é recomendado usar vários formatos de vídeo. Os formatos mais comuns incluem MP4, WebM e OGG.

Formato MP4

MP4 (MPEG-4 Parte 14) é um dos formatos de vídeo mais populares. Ele é suportado pela maioria dos navegadores e dispositivos. MP4 usa compressão com perdas e oferece boa qualidade de vídeo com tamanho de arquivo relativamente pequeno.

Exemplo:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Formato WebM

WebM é um formato de compressão de vídeo aberto, desenvolvido para uso na internet. Ele é suportado pela maioria dos navegadores modernos e proporciona boa qualidade de vídeo.

Exemplo:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Formato OGG

OGG (Ogg Theora) é um formato de vídeo aberto, suportado por muitos navegadores. Este formato oferece boa qualidade de vídeo e é frequentemente usado como uma alternativa ao MP4 e WebM.

Exemplo:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Exemplo de uso de múltiplos formatos para garantir compatibilidade

Para garantir compatibilidade entre diferentes navegadores, é recomendado indicar várias fontes de vídeo em diferentes formatos. O navegador escolherá o primeiro formato suportado.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Seu navegador não suporta o elemento de vídeo.
      </video>