Vídeos nativos com a tag video

Antes do HTML5, incorporar vídeos em páginas web exigia plugins externos como Flash ou Silverlight — tecnologias que dependiam de instalação no computador do usuário e que hoje estão completamente obsoletas.

Com o HTML5, a tag <video> trouxe suporte nativo a vídeos diretamente no navegador — sem plugins, sem dependências externas, com controles acessíveis e integração completa com CSS e JavaScript.

Anatomia básica da tag video

<video src="meu-video.mp4" controls>
  Seu navegador não suporta vídeos HTML5.
</video>

Diferente da <img>, a <video> é um elemento com abertura e fechamento — o conteúdo entre as tags é o texto de fallback, exibido apenas em navegadores que não suportam a tag (o que é raríssimo hoje).

Os atributos essenciais

<video
  src="apresentacao.mp4"
  controls
  width="800"
  height="450"
>
  Seu navegador não suporta reprodução de vídeo.
</video>

O atributo controls

O atributo controls é booleano — sua simples presença já ativa os controles nativos do navegador:

<!-- ✅ Com controles — o usuário pode play/pause/volume -->
<video src="video.mp4" controls></video>

<!-- ❌ Sem controles — o usuário não tem como interagir -->
<video src="video.mp4"></video>

⚠️ Nunca omita controls em vídeos de conteúdo — sem ele, o usuário não tem como pausar, avançar ou controlar o volume. Omitir controls é um erro grave de acessibilidade.

Os controles nativos incluem: botão de play/pause, barra de progresso, controle de volume, botão de tela cheia e, dependendo do navegador, velocidade de reprodução e legendas.

O visual dos controles varia entre navegadores — Chrome, Firefox e Safari têm estilos diferentes para os controles nativos.

Múltiplas fontes com a tag source

Diferentes navegadores suportam diferentes formatos de vídeo. Para garantir compatibilidade, você pode fornecer múltiplas fontes com a tag <source> — o navegador usa a primeira que conseguir reproduzir:

<video controls width="800" height="450">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4"  type="video/mp4">
  Seu navegador não suporta reprodução de vídeo.
</video>

Quando <source> é usado, o src não vai na tag <video> — vai em cada <source> individualmente.

💡 A ordem das fontes importa: o navegador tenta a primeira e só vai para a próxima se não conseguir reproduzir. Coloque o formato mais eficiente primeiro — geralmente WebM — e o formato mais compatível por último — geralmente MP4.

Formatos de vídeo para a web

<!-- Ordem recomendada: mais eficiente → mais compatível -->
<video controls width="800" height="450">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4"  type="video/mp4">
  <p>
    Seu navegador não suporta vídeo HTML5.
    <a href="video.mp4">Baixar o vídeo</a>.
  </p>
</video>

Atributos de comportamento

autoplay: reprodução automática

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

Inicia a reprodução automaticamente ao carregar a página.

⚠️ Atenção: a maioria dos navegadores modernos bloqueia o autoplay com som por padrão — para evitar que páginas toquem áudio inesperado. Para que o autoplay funcione, o vídeo geralmente precisa estar também com muted:

<!-- ✅ Autoplay que funciona na maioria dos navegadores -->
<video src="video.mp4" autoplay muted controls></video>

muted: vídeo sem som

<video src="video-background.mp4" autoplay muted loop></video>

Inicia o vídeo sem áudio. Necessário para autoplay funcionar na maioria dos navegadores.

loop: repetição automática

<video src="animacao.mp4" autoplay muted loop></video>

Reinicia o vídeo automaticamente ao terminar. Muito usado em vídeos de fundo decorativos.

poster: imagem de capa

<video
  src="palestra.mp4"
  controls
  poster="capa-palestra.jpg"
  width="800"
  height="450"
>
</video>

Define uma imagem que é exibida antes do vídeo começar a reproduzir — a capa do vídeo. Sem poster, o navegador exibe o primeiro frame do vídeo ou uma tela escura enquanto carrega.

preload: dica de carregamento

<!-- none: não pré-carrega nada -->
<video src="video.mp4" controls preload="none"></video>

<!-- metadata: carrega apenas informações básicas (duração, dimensões) -->
<video src="video.mp4" controls preload="metadata"></video>

<!-- auto: o navegador decide quanto carregar (padrão) -->
<video src="video.mp4" controls preload="auto"></video>

O preload dá uma dica ao navegador sobre quanto do vídeo pré-carregar:

• none → economiza banda — ideal para vídeos opcionais que o usuário pode nem assistir
• metadata → carrega apenas duração e dimensões — bom equilíbrio para a maioria dos casos
• auto → o navegador decide — pode consumir banda desnecessária em conexões lentas

Legendas e acessibilidade com a tag track

A tag <track> adiciona legendas, transcrições e descrições de áudio ao vídeo — um requisito essencial de acessibilidade para usuários com deficiência auditiva:

<video controls width="800" height="450">
  <source src="palestra.webm" type="video/webm">
  <source src="palestra.mp4"  type="video/mp4">

  <!-- Legenda em português -->
  <track
    kind="subtitles"
    src="legendas-pt.vtt"
    srclang="pt"
    label="Português"
    default
  >

  <!-- Legenda em inglês -->
  <track
    kind="subtitles"
    src="legendas-en.vtt"
    srclang="en"
    label="English"
  >
</video>

Atributos da tag track

Valores do atributo kind

O formato WebVTT

Legendas são fornecidas em arquivos .vtt (Web Video Text Tracks) — um formato de texto simples:

WEBVTT

00:00:01.000 --> 00:00:04.000
Bem-vindo ao curso de HTML!

00:00:04.500 --> 00:00:08.000
Hoje vamos aprender sobre a tag video.

00:00:08.500 --> 00:00:12.000
Este é um elemento muito poderoso do HTML5.

💡 Fornecer legendas não é apenas uma boa prática — é um requisito das diretrizes WCAG 2.1 nível AA para qualquer vídeo com conteúdo de áudio importante.

Vídeo de fundo decorativo

Um uso muito comum em sites modernos é o vídeo de fundo — geralmente sem controles, em loop e sem som:

<!-- Vídeo decorativo de fundo — sem controles -->
<video
  autoplay
  muted
  loop
  playsinline
  aria-hidden="true"
  width="1920"
  height="1080"
>
  <source src="fundo.webm" type="video/webm">
  <source src="fundo.mp4"  type="video/mp4">
</video>

Detalhes importantes:

• aria-hidden="true" → oculta o vídeo de leitores de tela — já que é puramente decorativo
• playsinline → necessário em iOS para evitar que o Safari force o vídeo a abrir em tela cheia
• Sem controls → vídeos puramente decorativos não precisam de controles

Exemplo completo: player de vídeo acessível

<figure>

  <video
    controls
    width="800"
    height="450"
    poster="capa-aula.jpg"
    preload="metadata"
  >
    <source src="aula-html-video.webm" type="video/webm">
    <source src="aula-html-video.mp4"  type="video/mp4">

    <track
      kind="captions"
      src="legendas-pt.vtt"
      srclang="pt"
      label="Português"
      default
    >
    <track
      kind="captions"
      src="legendas-en.vtt"
      srclang="en"
      label="English"
    >

    <p>
      Seu navegador não suporta reprodução de vídeo.
      <a href="aula-html-video.mp4" download>
        Baixar o vídeo (MP4)
      </a>.
    </p>

  </video>

  <figcaption>
    Aula 7 — A tag <code><video></code> no HTML5.
    <small>Duração: 12 minutos</small>
  </figcaption>

</figure>

Comparação de atributos booleanos

Atributos booleanos — controls, autoplay, muted, loop e playsinline — funcionam pela simples presença. Não precisam de valor:

<!-- ✅ As duas formas abaixo são equivalentes -->
<video controls autoplay muted loop></video>
<video controls="controls" autoplay="autoplay" muted="muted"></video>

<!-- A primeira forma é mais limpa e preferida -->

Resumindo

Boas práticas:

• Sempre use controls em vídeos de conteúdo
• Use muted junto com autoplay
• Forneça poster para uma boa experiência visual
• Forneça legendas com <track> para acessibilidade
• Use aria-hidden="true" em vídeos puramente decorativos
• Forneça múltiplos formatos com <source>: WebM primeiro, MP4 como fallback