Como criar legendas e transcrições para vídeo e áudio em uma landing page criada por IA

Um vídeo de demonstração pode explicar a oferta melhor que três parágrafos. Também pode esconder a promessa, a fala do cliente e o próximo passo de quem não ouve o áudio, não vê a tela com nitidez ou prefere pesquisar o conteúdo em texto.

Gerar uma transcrição automática é um começo, não uma entrega pronta. Ela pode errar nomes, ignorar mudança de locutor e deixar de fora um alerta sonoro ou uma informação mostrada apenas no vídeo. Publicar sem revisar transfere esse problema para quem precisa da alternativa.

Este guia organiza o que cada mídia precisa e como colocar isso numa landing page criada por IA sem simular uma solução que o player não oferece.

Descubra qual alternativa a mídia pede

Não existe um único arquivo que resolve todo vídeo e áudio. A decisão depende do tipo de mídia e da informação que ela carrega.

A orientação da W3C para legendas exige legendas para o conteúdo de áudio em vídeo gravado, salvo quando ele é uma alternativa claramente identificada a um texto que já está na página. A orientação para transcrições diferencia a transcrição básica da descritiva, que também relata a informação visual necessária.

Não use “tem vídeo” como justificativa para repetir um texto de vendas. Se o vídeo mostra uma configuração, uma comparação ou uma demonstração que não aparece em outro lugar, essa informação precisa de uma alternativa equivalente.

Escreva o conteúdo antes de sincronizar

Comece por um roteiro ou transcrição bruta. Depois compare com a versão final do arquivo, não com o script de produção.

Inclua:

• fala, com identificação de locutor quando muda o sentido;
• sons que carregam informação, como aplausos, campainha ou erro do sistema;
• texto que aparece no vídeo e não está disponível ao redor;
• descrição visual quando uma ação, gráfico ou tela é indispensável;
• pausas e cortes apenas quando ajudam a entender.

Não transcreva cada ruído de fundo. “Música suave” pode bastar quando ela é relevante. Um efeito de notificação que confirma uma etapa precisa ser descrito. A W3C explica como transcrever áudio e recomenda conferir a transcrição contra o áudio final, inclusive quando ela começou em um roteiro.

Uma transcrição automática costuma ser mais útil como rascunho. Faça revisão humana de nomes, números, acrônimos, palavras em outro idioma e momentos em que o produto muda na tela.

Use legendas reais no player

Para vídeo hospedado no próprio site, um arquivo WebVTT pode entrar como faixa de legenda no elemento video.

<video controls preload="metadata" poster="/assets/demo-poster.webp">
  <source src="/assets/demo-produto.mp4" type="video/mp4" />
  <track
    kind="captions"
    srclang="pt-BR"
    label="Português"
    src="/assets/demo-produto.pt-BR.vtt"
    default
  />
</video>

O arquivo precisa acompanhar o vídeo certo e permanecer disponível no endereço publicado. Não escreva uma transcrição ao lado e anuncie que o vídeo tem legendas. São experiências diferentes. Legendas acompanham a fala no tempo do vídeo; uma transcrição permite leitura, busca e consulta no ritmo da pessoa.

Se usar um player externo, confirme na documentação e na interface publicada como as legendas são carregadas, ativadas e selecionadas. Não presuma que o embed herdará arquivos locais ou que uma legenda automática esteja revisada.

Publique a transcrição perto da mídia

Uma transcrição precisa ser fácil de encontrar sem abrir uma nova ferramenta. Para vídeo curto, ela pode aparecer logo abaixo. Para uma demonstração longa, um details bem nomeado pode reduzir o ruído visual sem escondê-la de quem procura.

<details>
  <summary>Transcrição da demonstração de publicação</summary>
  <p><strong>00:00. Apresentadora:</strong> Vamos criar uma nova página.</p>
  <p><strong>00:08. Na tela:</strong> O painel mostra o campo de slug preenchido.</p>
  <p><strong>00:14. Apresentadora:</strong> Agora publicamos a versão.</p>
</details>

Evite afirmar que esse trecho substitui descrição visual quando ele só repete a fala. Uma transcrição descritiva acrescenta o que acontece na tela, como valores, mudanças de estado e ações que a narração não explica.

O guia da W3C sobre planejamento de mídia recomenda entregar legendas e uma transcrição separada quando possível. A combinação atende situações diferentes e ainda deixa o conteúdo mais fácil de revisar.

Não deixe o player decidir sozinho

Teste o player como qualquer outro componente interativo:

• controles recebem foco em ordem compreensível;
• play, pausa, volume e tela cheia têm nome acessível;
• as legendas podem ser ativadas e identificadas;
• não há áudio automático por mais de alguns segundos sem controle;
• o poster não é a única fonte de informação necessária;
• o vídeo não começa sozinho depois de uma troca de foco;
• o texto alternativo do embed explica o propósito quando o player não carrega.

O roteiro de navegação por teclado ajuda a testar play, pausa, menus e foco. Se uma pessoa não consegue alcançar o seletor de legenda sem mouse, o arquivo VTT existente não resolve o problema.

Para autoplay, seja ainda mais cuidadoso. A W3C lista controle de áudio quando uma página toca som automaticamente por mais de três segundos. Em páginas de marketing, começar com áudio quase sempre é uma má escolha de experiência, mesmo quando há botão de pausa.

Preserve performance sem apagar a alternativa

Vídeo e iframe podem atrasar a página. Isso não justifica remover controle, legenda ou transcrição. Carregue metadados primeiro, escolha um poster honesto e deixe o player pesado entrar somente depois de uma intenção explícita quando ele não é a tarefa principal.

O guia sobre vídeos e iframes mostra como reduzir o custo de carregamento. Ao usar uma fachada, mantenha um botão com nome claro, diga o que será aberto e preserve caminho para a transcrição. Não transforme o teaser numa imagem sem alternativa.

Faça uma revisão que pega erros de conteúdo

Uma revisão útil vai além de verificar se existe .vtt no repositório:

1. assista ao vídeo sem som e leia as legendas;
2. ouça sem olhar a tela e marque informação visual ausente;
3. leia a transcrição sem reproduzir o arquivo;
4. teste play, pausa e legendas só com teclado;
5. experimente com leitor de tela e confirme nomes dos controles;
6. confira em tela pequena, com zoom alto e rede mais lenta;
7. compare o arquivo publicado com a versão aprovada do vídeo.

O guia de teste com leitor de tela ajuda a registrar o que o player anuncia. Para imagens estáticas ao redor, aplique também o roteiro de texto alternativo.

Publique e confira a URL final

No Site no Ar, arquivos dentro de public/ seguem para a URL pública quando o agente cria um deploy. Coloque vídeo, VTT, poster e páginas de transcrição em caminhos que o site publicado consiga servir. O contrato de Publicação explica a estrutura e o ciclo de Version.

Depois do deploy, abra a URL em outro navegador. Confira se o player encontra os arquivos, se a legenda aparece, se a transcrição continua acessível e se nenhum caminho local vazou para o HTML. Se trocar o vídeo, revise de novo a legenda e a transcrição. Um arquivo antigo sincronizado com uma fala nova pode ser pior que uma alternativa ausente porque parece confiável.

Mídia acessível não é um acabamento. Ela preserva o conteúdo que motivou o vídeo ou áudio a existir.