Áudio e vídeo

O Belavista grava visitas guiadas e vídeos curtos de impressão. HTML embute players nativos com audio e video — sem plugin.

O exemplo deste capítulo é 14-audio-e-video, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Embute audio e video com controls.
• Oferecer várias fontes com source e type.
• Usar poster em vídeo e texto de fallback.
• Conhecer track para legendas.
• Evitar autoplay abusivo e mídia sem controles.

Elementos audio e video

video e audio podem usar src direto ou um ou mais filhos source. Prefira audio para só som. Atributos úteis: controls, loop, muted, preload. Em vídeo também: poster, width, height.

<video src="demonstracao.webm" poster="cartaz.svg" controls width="640" height="360">
  <p>Assista ao <a href="demonstracao.webm">arquivo WebM</a> se o player não aparecer.</p>
</video>

O conteúdo entre as tags é fallback quando o elemento não é suportado. Sempre deixe um caminho útil (link para o arquivo).

Várias fontes e type

O navegador escolhe a primeira fonte que consegue decodificar. O exemplo inclui uma fonte WebM. Se você oferecer outro formato, acrescente um segundo source com um arquivo diferente e seu tipo correto:

<video controls poster="cartaz.svg" width="640" height="360">
  <source src="demonstracao.webm" type="video/webm">
  <p>Baixe o <a href="demonstracao.webm">vídeo WebM</a>.</p>
</video>

Defina proporção coerente com o poster para reduzir salto de layout ao carregar.

Tracks (legendas)

track aponta arquivos de legendas/descrições (ex.: WebVTT). kind, srclang e label descrevem a faixa; default marca a preferida.

<track kind="captions" srclang="pt" label="Português" src="demonstracao.vtt" default>

Legenda não é opcional de luxo: é acessibilidade e compreensão em ambiente barulhento.

Controles e autoplay

Erro comum: omitir controls e ligar autoplay. Muitos navegadores bloqueiam autoplay com som. Sem controles, a pessoa não pausa nem muda volume. Inclua controls sempre neste volume. Se experimentar autoplay, combine com muted e ainda assim ofereça controles.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Áudio e vídeo — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Visita ao ateliê</h1>
      <p>Arquivos originais incluídos no exemplo. Áudio: sinal breve sem fala. Vídeo: uso dos controles da página.</p>

      <h2>Vídeo: controles da página</h2>
      <video controls poster="cartaz.svg" width="640" height="360">
        <source src="demonstracao.webm" type="video/webm">
        <track kind="captions" srclang="pt" label="Português" src="demonstracao.vtt" default>
        <p>Baixe o <a href="demonstracao.webm">vídeo WebM</a>.</p>
      </video>

      <h2>Áudio: sinal breve</h2>
      <audio controls>
        <source src="sinal.wav" type="audio/wav">
        <p>Baixe o <a href="sinal.wav">sinal WAV</a>.</p>
      </audio>
    </main>
  </body>
</html>

Remova controls de um dos players, recarregue e note a diferença de usabilidade.

Boas práticas rápidas

Não embuta arquivos enormes sem avisar. Prefira formatos modernos com fallback. Texto da página deve fazer sentido mesmo se a mídia falhar. Transcrição completa de áudio longo é o ideal fora deste volume — aqui o mínimo é player utilizável + fallback.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Por que informar type em cada source?
2. Para que serve o atributo poster?
3. Por que controls é obrigatório neste volume?

Respostas comentadas

1. O navegador sabe se consegue decodificar antes de baixar o arquivo errado.
2. Mostrar uma imagem estática enquanto o vídeo carrega e antes de reproduzir.
3. Sem controles, a pessoa não pausa, muda volume nem usa o player com teclado de forma previsível; autoplay sem saída é péssima experiência.