Áudio e vídeo
Antes, embutir áudio ou vídeo numa página exigia plugins externos. Hoje, o HTML faz isso nativamente, com duas tags simples.
Estudar esta lição interativa →Nos primórdios da web, tocar um vídeo ou um áudio numa página dependia de plugins externos (o Flash foi o mais famoso), que precisavam ser instalados à parte e viviam travando o navegador. Hoje, o HTML resolve isso nativamente, com duas tags dedicadas: <audio> e <video>.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O atributo controls é o que faz aparecer o play, o volume e a barra de progresso.
Repare em duas coisas no exemplo. Primeiro, o atributo controls: sem ele, o navegador carrega o arquivo, mas não mostra nenhum botão de play, volume ou avanço, deixando a mídia praticamente inutilizável para quem visita a página. Segundo, o texto dentro da tag (algo como "Seu navegador não suporta vídeo...") é o plano B para navegadores que nem conhecem <audio> e <video>, hoje praticamente só os muito antigos, no mesmo espírito do alt nas imagens. Ele não aparece quando o navegador conhece a tag mas não consegue tocar o arquivo: nesse caso você vê um player com erro. Para se proteger de formatos sem suporte, ofereça vários <source> (como .webm e .mp4): o navegador usa o primeiro que ele sabe tocar. Terceiro, o <track kind="captions"> liga ao vídeo um arquivo de legendas no formato WebVTT, e o botão de legendas aparece no player. Aqui a legenda vai embutida no próprio src só para o exemplo funcionar sozinho; num site de verdade, o src aponta para um arquivo, como legendas.pt-BR.vtt.
Um exemplo real: praticamente todo player de podcast embutido num site (mesmo os que parecem sofisticados, com waveform colorido) usa um <audio> por baixo, só estilizado com CSS e controlado com um pouco de JavaScript por cima da base nativa do HTML.
Nos exemplos acima, as tags trazem preload="none". Esse atributo manda o navegador não baixar nada do arquivo até a pessoa apertar o play. Sem ele, o navegador costuma buscar o começo da mídia assim que a página abre, gastando a internet de quem talvez nem queira ouvir. Neste curso isso também tem outro efeito: os arquivos de exemplo ficam no site do MDN, e com preload="none" a plataforma só pede esses arquivos depois que você aperta o play (a política de privacidade lista esse endereço).
Esquecer o controls é o erro número um, a mídia carrega, mas ninguém consegue tocá-la. Outro cuidado importante é com o atributo autoplay (que toca sozinho, sem clique): usado com som ligado, ele costuma ser considerado uma péssima prática de usabilidade, pois assusta e incomoda quem está navegando, e por isso a maioria dos navegadores hoje bloqueia autoplay com som por padrão. E, para vídeos, vale lembrar (mesmo sem entrar em detalhe agora): pessoas surdas ou com deficiência auditiva dependem de legendas para acompanhar o conteúdo, e por isso o exemplo acima já traz um <track>.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Monte o player de áudio.