HTML Multimídia
Aprenda as tags de multimídia HTML e os formatos de áudio e vídeo suportados pelos navegadores, além de como servir múltiplas fontes, adicionar legendas e lidar com autoplay.
Multimídia é quase tudo que você pode ouvir ou ver (por exemplo, sons, música, imagens, gravações, vídeos, filmes, animações, etc.). Ela existe em diferentes formatos. As páginas web podem conter elementos multimídia de diferentes formatos e tipos.
Este capítulo apresenta uma visão geral das tags HTML que incorporam mídia, os formatos de áudio e vídeo efetivamente suportados pelos navegadores, e os padrões práticos que você precisa conhecer: servir múltiplos formatos com <source>, adicionar legendas para acessibilidade e lidar corretamente com o autoplay.
Tags de Multimídia
O HTML permite adicionar diferentes arquivos multimídia ao seu site por meio de várias tags multimídia. Essas tags incluem:
<audio>para reproduzir um arquivo de áudio na página web,<video>para reproduzir um arquivo de vídeo na página web,<source>para oferecer vários arquivos de mídia para que o navegador escolha o que suporta,<track>para adicionar legendas ou subtítulos a um elemento<video>ou<audio>,<embed>para incorporar conteúdo externo (mais comumente PDFs) na página web,<object>para incorporar recursos externos — uma tag amplamente obsoleta hoje em dia,<iframe>para incorporar outras páginas web.
Aqui está um exemplo básico usando o atributo controls e as tags <source>:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>O texto entre as tags de abertura e fechamento ("Your browser does not support…") é conteúdo de fallback. Ele é exibido apenas se o navegador não conseguir reproduzir o elemento.
Por Que Usar Múltiplos Elementos <source>
Nenhum formato de áudio ou vídeo é suportado por todos os navegadores. Para cobrir todos eles, você lista vários elementos <source> dentro de um elemento <audio> ou <video>. O navegador percorre a lista de cima para baixo e usa a primeira fonte cujo formato ele consegue reproduzir, ignorando as demais. Portanto, coloque o formato de sua preferência primeiro.
Um vídeo que funciona em todos os navegadores geralmente oferece tanto MP4 (suporte mais amplo, incluindo Safari) quanto WebM (gratuito, aberto e bem suportado no Chrome e Firefox):
<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video element.
</video>O atributo type permite que o navegador pule um formato não suportado sem precisar baixar o arquivo primeiro, por isso inclua-o sempre.
Um elemento de áudio segue o mesmo padrão. MP3 funciona em todos os lugares; Ogg é uma alternativa gratuita suportada pelo Chrome e Firefox:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Legendas e Acessibilidade
Use o elemento <track> para adicionar legendas ou subtítulos a um vídeo. As legendas tornam o seu conteúdo acessível a espectadores surdos e com deficiência auditiva, e ajudam qualquer pessoa que assista sem som. A faixa kind="captions" aponta para um arquivo WebVTT (.vtt):
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>Autoplay, Poster e Preload
Alguns atributos do <video> merecem atenção:
autoplay— inicia a reprodução automaticamente. Os navegadores modernos bloqueiam o autoplay com som, portanto um clipe só vai reproduzir automaticamente se também estivermuted:<video autoplay muted>.poster— uma imagem exibida antes de o vídeo começar a reproduzir (um quadro de visualização).preload— indica quanto buffer deve ser carregado antecipadamente:none,metadata(apenas duração e dimensões) ouauto(o navegador pode carregar o arquivo inteiro).
Incorporando Outros Conteúdos: <object> e <embed>
Duas tags mais antigas podem incorporar recursos externos. Atualmente, seu uso é restrito:
<object>era um contêiner de uso geral para plugins e arquivos externos. Hoje é amplamente obsoleto — para vídeo e áudio comum, você deve usar<video>e<audio>.<embed>também incorpora conteúdo externo, mas em páginas modernas é usado principalmente para exibir PDFs.
<embed src="document.pdf" type="application/pdf" width="600" height="400">Formatos Multimídia
Elementos multimídia como áudio ou vídeo são armazenados em arquivos de mídia. Você pode descobrir o tipo de arquivo observando a extensão do arquivo.
As extensões multimídia mais comuns incluem .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv e .avi. (Você ainda pode encontrar arquivos Flash .swf, mas o Flash está obsoleto — foi removido de todos os navegadores em 2020.)
Formatos de Áudio
O formato mais recente para música gravada com compressão é o MP3. Esse termo é sinônimo de música digital.
O MP3 é uma boa escolha se o seu site trata de música gravada.
| Formato | Arquivo | Descrição |
|---|---|---|
| MIDI (Musical Instrument Digital Interface). | .mid .midi | É o principal formato para todos os dispositivos de música eletrônica (por exemplo, sintetizadores e placas de som de PC). Os arquivos MIDI contêm notas digitais que podem ser tocadas por eletrônicos, mas não incluem som. Funciona bem em hardware musical e computadores, mas não nativamente em navegadores web. Os navegadores modernos podem lidar com MIDI via Web Audio API. |
| RealAudio | .rm .ram | Permite streaming de áudio com baixa largura de banda. Não reproduz em navegadores web. |
| WMA | .wma | Este formato foi desenvolvido pela Microsoft e é comumente usado em players de música. Funciona bem em computadores Windows, mas não em navegadores web. |
| AAC | .aac | Este formato foi desenvolvido pela Apple como o formato padrão do iTunes. Arquivos .aac brutos têm suporte limitado nos navegadores, mas o áudio AAC é amplamente suportado quando empacotado dentro de contêineres .mp4. |
| WAV | .wav | Este formato foi desenvolvido pela IBM e Microsoft. Funciona bem nos sistemas operacionais Windows, Linux e Macintosh. Suportado pelo HTML5. |
| Ogg | .ogg | Este formato foi desenvolvido pela Fundação Xiph.Org. Suportado pelo HTML5. |
| MP3 | .mp3 | É o formato mais popular para players de música. O formato tem boa compressão (arquivos pequenos) e alta qualidade. Suportado por todos os navegadores. |
| MP4 | .mp4 | É um formato de vídeo que também pode ser usado para áudio. O vídeo MP4 é o futuro formato de vídeo na internet, o que leva ao suporte automático para áudio MP4 por todos os navegadores. |
Um contêiner (como .mp4 ou .ogg) é o invólucro do arquivo; o codec (como AAC, MP3 ou Vorbis) define como o áudio interno é codificado. Os navegadores se preocupam com ambos. Na prática, para a web você pode contar com MP3 (todos os navegadores) e Ogg (Chrome e Firefox). O áudio AAC é amplamente suportado quando entregue dentro de um contêiner .mp4.
Formatos de Vídeo
| Formato | Arquivo | Descrição |
|---|---|---|
| MPEG | .mpg .mpeg | Criado pelo Moving Pictures Expert Group. É o primeiro formato de vídeo popular na web. Não suportado no HTML5. |
| AVI (Audio Video Interleave) | .avi | Criado pela Microsoft. É normalmente usado em hardware de TV e câmeras de vídeo. Funciona bem em computadores Windows, mas não em navegadores web. |
| WMV (Windows Media Video) | .wmv | Criado pela Microsoft. É normalmente usado em hardware de TV e câmeras de vídeo. Funciona bem em computadores Windows, mas não em navegadores web. |
| QuickTime | .mov | Criado pela Apple. É normalmente usado em hardware de TV e câmeras de vídeo. Funciona bem em computadores Apple, mas não em navegadores web. |
| RealVideo | .rm .ram | Criado pela Real Media e permite streaming de vídeo com baixa largura de banda. Ainda é usado para TV na Internet e vídeo online, mas não reproduz em navegadores web. |
| Flash | .swf .flv | Obsoleto. O Adobe Flash Player foi removido de todos os navegadores modernos em 2020. Este formato é considerado legado e requer emuladores de terceiros para reprodução. |
| Ogg Theora | .ogg | Criado pela Fundação Xiph.Org. Suportado pelo HTML5. |
| WebM | .webm | Criado pela Mozilla, Opera, Google e Adobe. Suportado pelo HTML5. |
| MPEG-4 ou MP4 | .mp4 | Criado pelo Moving Pictures Expert Group. É geralmente usado em hardware de TV e câmeras de vídeo mais recentes. Recomendado pelo YouTube. Suportado por todos os navegadores HTML5. |
Para o <video> do HTML5, opte por MP4 (vídeo H.264 + áudio AAC — funciona em todo lugar, incluindo Safari), WebM e Ogg (ambos suportados no Chrome e Firefox). Os elementos <source> de MP4 mais WebM juntos cobrem praticamente todos os navegadores modernos.
Suporte dos Navegadores
Áudio e vídeo são reproduzidos nativamente por todos os navegadores modernos — sem necessidade de plugins de terceiros. O suporte não é idêntico entre os formatos, e é exatamente por isso que você oferece múltiplos elementos <source>:
- Áudio — MP3 e AAC (em
.mp4) funcionam em todos os principais navegadores, incluindo Safari. Ogg/Vorbis funciona no Chrome e Firefox, mas não no Safari. - Vídeo — MP4 (H.264) funciona em todo lugar, incluindo Safari. WebM e Ogg/Theora funcionam no Chrome e Firefox.
A combinação segura e amplamente utilizada é MP4 + WebM para vídeo e MP3 + Ogg para áudio.