Vídeo em HTML

Vídeo não é enfeite: é entrega de mídia

Um vídeo sem controle, sem legenda, sem contexto e sem performance não é profissional. Ele pesa a página, exclui usuários e quebra a experiência. HTML5 permite vídeo nativo, mas cabe ao desenvolvedor entregar essa mídia com responsabilidade.

A tag video, controls, src, source e fallback

O elemento video é um contêiner de mídia rica. Com controls, o usuário ganha autonomia para reproduzir, pausar, controlar volume, avançar e abrir em tela cheia.

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

<video controls width="800">
  <source src="videos/aula-intro.webm" type="video/webm">
  <source src="videos/aula-intro.mp4" type="video/mp4">
  <source src="videos/aula-intro.ogv" type="video/ogg">
  <p>Seu navegador não suporta vídeos nativos.
    <a href="videos/aula-intro.mp4">Baixe o vídeo aqui</a>.
  </p>
</video>

MP4, WebM, OGG/OGV, formato, codec e compatibilidade

O Mestre não depende de um único arquivo. Ele entende que o navegador escolhe a primeira fonte compatível dentro do video, economizando processamento e evitando falhas.

<video controls width="800" poster="imagens/capa-aula-33.jpg">
  <source src="videos/aula-33.webm" type="video/webm">
  <source src="videos/aula-33.mp4" type="video/mp4">
  <source src="videos/aula-33.ogv" type="video/ogg">
  <p>Seu navegador não suporta vídeo HTML5.
    <a href="videos/aula-33.mp4">Baixar aula em MP4</a>.
  </p>
</video>

• MP4: maior compatibilidade geral; escolha obrigatória em projetos reais.
• WebM: moderno, otimizado para web e geralmente mais leve.
• OGG/OGV: alternativa aberta, útil como camada extra de compatibilidade.
• Formato: o contêiner do arquivo, como .mp4 ou .webm.
• Codec: o algoritmo que comprime e decodifica o vídeo.

width, height, poster, preload, autoplay, muted, loop, playsinline e controlsList

Os atributos avançados definem como o vídeo ocupa espaço, carrega, aparece antes do play e se comporta em dispositivos móveis.

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

<video autoplay muted loop playsinline preload="none">
  <source src="videos/fundo.webm" type="video/webm">
  <source src="videos/fundo.mp4" type="video/mp4">
</video>

<video controls controlsList="nodownload" src="videos/exclusivo.mp4"></video>

• width/height: reservam espaço e reduzem saltos de layout.
• poster: capa exibida antes do vídeo iniciar.
• preload="none": economiza banda.
• preload="metadata": carrega apenas dados técnicos.
• autoplay muted: exigência comum para reprodução automática sem som.
• loop: reinicia o vídeo; use apenas quando fizer sentido.
• playsinline: ajuda o vídeo a tocar dentro do layout em celulares.

Track, legendas, captions, descrições e transcrições

Vídeo acessível precisa ser consumível por quem não ouve, por quem não pode assistir no momento e por quem depende de alternativa textual. A tag track conecta faixas de texto temporizadas.

Transcrição resumida

Neste vídeo, apresentamos a função da tag video, o uso de múltiplos formatos, a importância do atributo controls e a necessidade de legendas e transcrições.

• Use track para legendas temporizadas.
• Use kind="captions" para legendas acessíveis com sons importantes.
• Use srclang para informar o idioma.
• Use label para nomear a faixa no player.
• Forneça resumo ou transcrição para cada vídeo.
• Informe tema e duração antes do player.

15 perguntas para provar domínio

1. Qual tag insere vídeo nativamente? <video>.
2. Para que serve poster? Define a imagem de capa antes do play.
3. Por que usar source? Para oferecer formatos alternativos.
4. O que muted faz? Inicia ou mantém o vídeo sem som.
5. Qual a função do loop? Reiniciar o vídeo automaticamente.
6. O que é playsinline? Permite tocar dentro do layout em celulares.
7. Qual tag é usada para legendas? <track>.
8. O que controls adiciona? Play, pause, volume e progresso.
9. Onde fica o texto de fallback? Entre <video> e </video>.
10. Qual atributo do track define o idioma? srclang.
11. Qual formato é mais compatível? MP4.
12. O que preload="none" faz? Economiza banda até o play.
13. Posso usar vídeo dentro de figure? Sim.
14. O que acontece se o navegador não entende a tag? Exibe o fallback.
15. A tag video precisa de fechamento? Sim, </video>.

Registre sua página de vídeo aula acessível

git status
git add .
git commit -m "aula-33: cria pagina de video aula html acessivel"
git push

• git status: verifica se o arquivo da vídeo aula foi criado.
• git add .: adiciona a página ao estágio de preparação.
• git commit: registra a evolução com uma mensagem clara.
• git push: envia seu trabalho para o repositório remoto.