Vídeo e áudio

Este capítulo embute mídia local com controles visíveis. A Oficina Costeira, coletivo fictício de design em João Pessoa, mostra uma demonstração dos controles da página sem autoplay com som. O exemplo correspondente é 13-video-e-audio, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Usar video e audio com controls.
• Oferecer source e tipo MIME.
• Ligar track com legendas WebVTT.
• Recusar autoplay com som.
• Guardar arquivos locais pequenos; não lotar o repositório.
• Manter skip-link e lang="pt-BR" na página completa.

Controles nativos primeiro

Sem o atributo controls, o vídeo pode aparecer como quadro parado sem botão. A pessoa não reproduz. Sempre declare controls neste volume.

<video controls width="640">
  <source src="assets/midia/demonstracao.webm" type="video/webm">
  <p>Seu navegador não reproduz o vídeo. <a href="assets/midia/demonstracao.webm">Baixe o arquivo WebM</a>.</p>
</video>

O parágrafo interno aparece quando o navegador não reconhece o elemento. Uma alternativa textual fora do player também é necessária: a falha de reprodução não garante que esse parágrafo apareça.

Formatos: MP4 (H.264) cobre a maior parte dos navegadores atuais. WebM é extra. Não dependa de plugin.

source, poster e tamanho

Vários source: o navegador escolhe o primeiro que entende.

<video controls poster="assets/imagens/marca.svg" width="640">
  <source src="assets/midia/demonstracao.webm" type="video/webm">
  <p>Demonstração dos controles da página. <a href="assets/midia/demonstracao.webm">Baixar WebM</a>.</p>
</video>

poster é o quadro antes do play. Sem poster, o primeiro frame (ou um vazio) aparece.

No CSS, max-width: 100%; height: auto evita estouro em tela estreita. Não deixe o vídeo abrir em tela cheia sozinho.

Erro comum: src apontando para um arquivo que não está na pasta. A barra de rede (ferramentas de desenvolvedor) mostra 404. Confira minúsculas: demonstracao.webm, não Demonstracao.WebM.

track: legendas e capítulos

track aponta para um arquivo .vtt. kind="captions" serve a quem não ouve. srclang="pt" e label aparecem no menu do player.

<video controls width="640">
  <source src="assets/midia/demonstracao.webm" type="video/webm">
  <track src="assets/midia/orla.vtt" kind="captions" srclang="pt" label="Português" default>
  <p>Demonstração dos controles da página, sem narração.</p>
</video>

Arquivo WebVTT (como no exemplo):

WEBVTT

00:00.000 --> 00:04.000
Demonstração dos controles de mídia da página Oficina Costeira.

A primeira linha é WEBVTT. Depois, tempo --> tempo e o texto. kind="chapters" marcaria seções. kind="subtitles" é tradução.

O exemplo deste capítulo é 13-video-e-audio, no pacote que acompanha o volume. Ligue as legendas no player. Preveja a descrição dos controles. Confira. Se o track não aparecer, teste em 127.0.0.1: alguns navegadores bloqueiam track em file://.

Sem autoplay com som

autoplay começa sozinho. Com som, atropela o leitor de tela e a pessoa no ônibus.

Não use autoplay com áudio. Se um fundo mudo for didático no futuro, a dupla é autoplay muted e ainda assim este volume prefere o play explícito.

<!-- Não faça isto neste curso: -->
<video autoplay></video>
<audio autoplay src="assets/midia/sinal.wav"></audio>

Faça isto:

<audio controls>
  <source src="assets/midia/sinal.wav" type="audio/wav">
  <p>Sinal breve sem fala. <a href="assets/midia/sinal.wav">Baixar WAV</a>.</p>
</audio>

loop e muted existem. Loop com som irrita. Deixe a pessoa decidir.

Áudio é quase o mesmo contrato

audio aceita controls, source, recuo em parágrafo. Não tem poster nem width de quadro.

MP3 é o formato mais compatível hoje. OGG é extra.

JavaScript para play na passagem do rato fica para os capítulos de comportamento. Acessibilidade exigiria também foco de teclado. Não construa player invisível agora.

Arquivos locais e o repositório

Vídeo pode ocupar muito espaço. O exemplo inclui uma gravação curta dos controles desta página, em assets/midia/demonstracao.webm, com legenda e um sinal de áudio WAV. Abra a referência completa: todos esses recursos acompanham o volume.

Não jogue um filme de 2 GB no commit. Remoto opcional (capítulo 06) entope. Hospedar mídia grande é decisão de publicação pública, fora deste capítulo.

Página completa: skip-link, menu da Oficina, main id="conteudo", o video com track, rodapé fictício.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Orla — Oficina Costeira</title>
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <p><a href="index.html">Oficina Costeira</a></p>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="projetos.html">Projetos</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Demonstração de mídia local</h1>
      <video controls width="640">
        <source src="assets/midia/demonstracao.webm" type="video/webm">
        <track src="assets/midia/orla.vtt" kind="captions" srclang="pt" label="Português" default>
        <p>Seu navegador não reproduz o vídeo.</p>
      </video>
    </main>
  </body>
</html>

Disco: WebM + WAV + VTT + HTML. Janela: player. 127.0.0.1: legendas mais confiáveis. Publicação: só se o autor pedir, com arquivo leve e sem som automático.

Erro comum: autoplay copiado de um tutorial de fundo. Remova. Deixe controls.

Mude só o label da track para “Português (legendas)”. Preveja o nome no menu do player. Recarregue. Confira.

Acessibilidade da mídia

Controles nativos têm botão de play, volume e, com track, legendas. Não esconda o player com CSS opaco. Não dispare som no carregamento da home.

O skip-link continua primeiro. Depois o menu. Depois o h1. Depois o vídeo. Tab deve alcançar o player.

Atividades

1. Por que controls é obrigatório neste volume?
2. Em que situação o track pode falhar em file:// e funcionar em 127.0.0.1?
3. Qual é a regra sobre autoplay com som?
4. No exemplo, ligue as legendas. O texto bate com orla.vtt?

Respostas comentadas

1. Sem controls, muita gente não consegue reproduzir. O player nativo já traz teclado e botões. Player customizado fica para JavaScript, mais tarde.
2. Alguns navegadores restringem legendas em protocolo de arquivo. O teste local HTTP em 127.0.0.1 trata o VTT como recurso de site. Ainda não é publicação.
3. Não. Autoplay com som atropela quem ouve a página e quem não pediu áudio. Play explícito.
4. Deve mostrar “Demonstração dos controles de mídia da página Oficina Costeira.” Se o menu de legendas estiver vazio, confira o caminho do src e o protocolo da barra.

Referências

• Elemento video
• Elemento audio
• Elemento track
• Conteúdo de áudio e vídeo
• WebVTT

O arquivo completo

Referência do exemplo 13-video-e-audio, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}