Áudio e vídeo sem depender de outra conta

Neste capítulo você vai oferecer mídia local com controles e alternativa textual.

Seu ponto de partida

Estude depois do capítulo 12. O exemplo deste capítulo é 13-audio-video, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Áudio tem controles e explicação

Audio incorpora som; controls disponibiliza controles do navegador. A referência contém um sinal sonoro breve produzido para a prática. Não é fala nem música de terceiros. O texto explica sua função antes de tocar.

Não use autoplay: a pessoa escolhe quando iniciar. Volume e pausa devem continuar sob seu controle. O conteúdo essencial está em texto, então não é necessário ouvir para entender a página.

Faça no seu exemplo

Confira local.html.

<audio controls preload="metadata">
  <source src="assets/midia/sinal.wav" type="audio/wav">
  Seu navegador não reproduz este áudio.
</audio>
<p>O áudio é um sinal breve de início de atividade.</p>

Mude uma coisa e preveja

Troque somente a frase explicativa por Sinal sonoro para começar a prática.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O texto muda; os controles continuam disponíveis.

Se não acontecer

Se não tocar, confira src e o arquivo local. Não substitua a alternativa por uma promessa de conteúdo inexistente.

Vídeo também precisa de alternativa

Video oferece controles e pode mostrar um poster antes da reprodução. A demonstração local mostra a página do evento sendo usada, sem pessoas ou dados reais. Track liga legendas em WebVTT. Elas descrevem a ação visual desta demonstração sem fala.

Uma descrição textual acompanha o vídeo. Para outros vídeos com fala, produza legendas sincronizadas com o áudio e uma transcrição útil; não use estas legendas fictícias como modelo pronto para qualquer gravação.

Faça no seu exemplo

Confira o vídeo e seu arquivo de legendas.

<video controls preload="metadata" poster="assets/imagens/poster.png">
  <source src="assets/midia/demonstracao.webm" type="video/webm">
  <track kind="captions" src="assets/midia/demonstracao.vtt" srclang="pt-BR" label="Português" default>
  Seu navegador não reproduz este vídeo.
</video>

Mude uma coisa e preveja

Troque somente o texto que descreve a demonstração.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A descrição muda; os recursos continuam no caminho local.

Se não acontecer

Se as legendas não carregarem por arquivo, use o teste HTTP local explicado no README. Não retire a descrição textual para esconder a diferença do navegador.

Incorporar conteúdo externo é outra decisão

Iframe abre outro documento dentro da página. Conteúdo externo pode exigir conexão e transferir pedidos a terceiros. Um link descritivo pode ser uma alternativa mais simples. O exercício funciona integralmente sem mapa, player remoto ou conta.

Quando usar iframe em outro projeto, dê um title que explique seu conteúdo e confira teclado, privacidade e alternativa. Aqui o local fictício é descrito em texto; não inventamos um endereço real.

Faça no seu exemplo

Leia a descrição do local.

<p>Recife, PE. Local fictício descrito apenas para o exercício.</p>

Mude uma coisa e preveja

Troque somente Local fictício por Espaço de prática fictício.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A informação permanece acessível sem carregar serviços externos.

Se não acontecer

Não coloque um mapa real para um endereço inventado. O exercício não é um evento publicado.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Toque e pause o áudio com teclado.

2. Confira o vídeo e a descrição sem reproduzi-lo.

3. Explique por que o exercício não depende de iframe.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Os controles nativos permitem escolher a reprodução.

2. O texto comunica a ação e o conteúdo da demonstração.

3. Os recursos locais e a descrição são suficientes, sem conta ou conexão obrigatória.

Quando seguir

Você oferece mídia opcional e mantém a informação em texto. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> <a href="local.html">Local</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section><section aria-labelledby="beneficios"><h2 id="beneficios">O que você encontra</h2><ul class="beneficios"><li>Explicações curtas</li><li>Exemplos para alterar</li><li>Tempo para conferir</li></ul><h2>Seu percurso de prática</h2><ol><li>Abra a página.</li><li>Mude uma coisa.</li><li>Confira o resultado.</li></ol></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }
.aviso { color: #703c16; font-weight: 700; }
body { font-family: Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; }
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { line-height: 1.3; }
* { box-sizing: border-box; }
body { margin: 0; padding-inline: 1rem; }
header, main, footer { max-width: 64rem; margin-inline: auto; }
header, footer { padding: 1.5rem 0; }
main { padding: 1.5rem; background: white; border-radius: .6rem; }
section { margin-block: 1.5rem; }
.cartao { border: 1px solid #a6b8c3; padding: 1rem; border-radius: .4rem; }
.destaques { display: flex; flex-wrap: wrap; gap: 1rem; }
.destaques > .cartao { flex: 1 1 16rem; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
[aria-current=page] { font-weight: 700; }
@media (max-width: 40rem) { main { padding: 1rem; } }
.hero { background: #e4f0f5; padding: 1.5rem; border-radius: .6rem; }
header { background-color: #e4f0f5; background-image: linear-gradient(120deg, #e4f0f5, #f5eee0); padding-inline: 1rem; }
.beneficios { list-style-type: disc; padding-inline-start: 1.5rem; }
.beneficios li { margin-block: .4rem; }
img { max-width: 100%; height: auto; }
.retrato { max-width: 12rem; }
figure { margin-inline: 0; }
video, audio { display: block; width: 100%; max-width: 36rem; margin-block: 1rem; }