Áudio e Vídeo no HTML5
Incorpore áudio e vídeo no HTML5 sem Flash. Aprenda os elementos audio, video, source e track, codecs, autoplay, legendas e acessibilidade, com exemplos.
Antigamente, tecnologias web nativas como o HTML não permitiam incorporar vídeo e áudio na Web. Tecnologias baseadas em plugins tornaram-se populares para lidar com esse tipo de conteúdo, mas apresentavam muitos problemas, incluindo má integração com recursos de HTML/CSS, questões de segurança e acessibilidade. Posteriormente, a especificação do HTML5 introduziu esses recursos com os elementos <video> e <audio>.
O elemento <audio> é usado para incorporar arquivos de áudio em uma página web, e o elemento <video> é usado para incorporar um vídeo.
Como Adicionar Áudio na Página Web
Antes do HTML5, o áudio era adicionado à página como som de fundo usando a tag não padronizada <bgsound>. O arquivo era reproduzido enquanto a página estava sendo visualizada, e o usuário não podia silenciar o som. No HTML5, podemos incorporar arquivos de áudio usando a tag <audio>, sem necessidade de conectar plugins de terceiros. O elemento de áudio pode ser controlado com HTML ou Javascript e estilizado com CSS.
No código, o atributo src aponta para a URL do arquivo de áudio, e o atributo controls adiciona um painel de controle (botão de reprodução, barra de progresso, controle de volume).
Áudio e Vídeo no HTML5
<audio src="name.ogg" controls></audio>Sempre inclua o atributo controls, a menos que você forneça seus próprios controles acessíveis em JavaScript. Sem ele, usuários de teclado e leitores de tela não têm como reproduzir, pausar ou ajustar o volume da mídia.
Codecs de Áudio e Formatos de Arquivo de Áudio
Como nem todos os navegadores suportam todos os formatos de áudio, o arquivo de áudio é codificado/decodificado com um codec de áudio (um dispositivo eletrônico digital ou aplicativo de software baseado em computador que auxilia na compressão e descompressão de dados de áudio digital). Todos os formatos de arquivos de áudio são adicionados simultaneamente por meio do elemento <source> com o atributo src.
Ao definir diferentes formatos de arquivo, recomendamos definir um tipo MIME para cada arquivo, para que o navegador possa escolher o formato que suporta. O tipo MIME é definido com o atributo type. O navegador usa o primeiro <source> que consegue reproduzir, portanto ordene-os do formato mais preferido ou mais amplamente suportado para o menos.
Exemplo de adição de diferentes formatos de arquivos de áudio:
Exemplo de Codecs de Áudio e Formatos de Arquivo de Áudio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Os formatos de áudio mais populares são os seguintes:
MP3 — o formato de áudio mais popular, que usa compressão com perda para reduzir o tamanho do arquivo. É suportado por praticamente todos os navegadores, sendo uma escolha segura como <source> padrão.
AAC (Advanced Audio Codec) — uma alternativa ao MP3 que oferece maior qualidade com a mesma compressão ou mais forte. Também é amplamente suportado nos navegadores modernos (servido como audio/mp4 ou audio/aac).
Ogg Vorbis — um formato gratuito e de código aberto suportado no Firefox e no Chrome, mas não no Safari. Oferece boa qualidade de som, mas é menos usado em players de dispositivos.
Suporte a codec e navegador, em resumo: MP3 e AAC são suportados em quase todos os lugares, incluindo o Safari, portanto liste um deles como <source> de fallback. Ogg Vorbis e WebM (Opus) são livres de royalties e funcionam no Firefox e Chrome, mas não no Safari. Uma ordem comum e segura é colocar o formato aberto primeiro e MP3/AAC por último, para que cada navegador encontre algo que consiga reproduzir.
Como Adicionar Arquivos de Vídeo
Nas versões anteriores do HTML, os vídeos eram incorporados ao site por meio de plugins de terceiros, como QuickTime, RealPlayer ou Flash. O HTML5 tem uma nova tag <video>, usada para inserir um vídeo na página web.
No código, tem a seguinte aparência:
Áudio e Vídeo no HTML5
<video src="example.webm" controls></video>O atributo src indica a URL do arquivo, e o atributo controls exibe os controles de reprodução.
Autoplay, o atributo muted e acessibilidade
Você pode solicitar ao navegador que inicie a reprodução assim que a mídia estiver pronta com o atributo autoplay. No entanto, os navegadores modernos bloqueiam o autoplay com som para evitar surpreender o usuário. Como resultado, autoplay só funciona de forma confiável quando a mídia também está muted:
<video autoplay muted controls src="example.webm"></video>Use o autoplay com moderação. Mídias que iniciam automaticamente, especialmente com som, são desorientadoras para usuários de leitores de tela e pessoas com sensibilidades cognitivas ou vestibulares. O WCAG exige que qualquer áudio reproduzido por mais de três segundos tenha uma forma de pausar ou pará-lo, portanto mantenha controls presente sempre que usar autoplay.
O atributo poster
Para <video>, o atributo poster define uma imagem de espaço reservado exibida antes que o vídeo seja reproduzido (ou enquanto ele carrega). Isso oferece ao usuário uma prévia significativa em vez de um quadro em branco:
<video controls poster="/build/images/preview.jpg" src="example.webm"></video>O atributo preload
O atributo preload sugere ao navegador quanto deve ser armazenado em buffer antes que o usuário pressione play:
none— não armazene nada em buffer até que o usuário inicie a reprodução.metadata— carregue apenas os metadados (duração, dimensões, primeiro quadro).auto— o navegador pode baixar o arquivo inteiro antecipadamente.
preload é apenas uma sugestão, e os navegadores podem ignorá-la. Em dispositivos móveis ou páginas sensíveis ao uso de dados, prefira metadata ou none para não baixar arquivos grandes que o visitante talvez nunca assista.
Codecs de Vídeo e Formatos de Arquivo de Vídeo
Cada navegador suporta um conjunto específico de codecs, portanto, para reproduzir vídeo em todos os lugares, você deve fornecer o arquivo em alguns formatos. Assim como com o áudio, cada formato é listado em seu próprio elemento <source>, começando pelo mais preferido. Cada arquivo de vídeo deve ter um tipo MIME, definido com o atributo type.
Para garantir que o servidor entregue os arquivos de vídeo ao navegador corretamente, pode ser necessário declarar seus tipos MIME na configuração do servidor (veja abaixo).
Exemplo de adição de diferentes formatos de arquivos de vídeo:
Exemplo de Codecs de Vídeo e Formatos de Arquivo de Vídeo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<p>Some information about video</p>
</body>
</html>Hoje existem 3 formatos básicos de vídeo: MP4/MPEG-4, OGG e WebM. Para a compressão de dados de vídeo e sua reprodução, usamos codecs.
Para um arquivo de vídeo no formato MPEG-4, são utilizados o codec de vídeo H.264 e o codec de áudio AAC. Se quiser usar esses codecs, é necessário obter uma licença.
Para o arquivo de vídeo Ogg, use o codec de vídeo Theora de código aberto e o codec de áudio Vorbis.
Para arquivos de vídeo WebM, use o codec de vídeo VP8 (ou VP9) e o codec de áudio Vorbis (ou Opus). Nesse caso, não é necessária uma licença.
Servindo os tipos MIME corretos
O servidor informa ao navegador que tipo de arquivo está enviando por meio do cabeçalho de resposta Content-Type (o tipo MIME). Se um servidor enviar um arquivo de mídia com o tipo MIME errado ou ausente, o navegador pode se recusar a reproduzi-lo mesmo que suporte o codec. Muitos servidores não estão configurados para servir Ogg, WebM ou MP4 por padrão, portanto pode ser necessário adicionar o mapeamento manualmente.
No Apache, adicione o seguinte a um arquivo .htaccess na pasta do seu site:
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webmNo Nginx, adicione as entradas correspondentes ao bloco types { ... } (geralmente em mime.types):
types {
audio/ogg oga;
audio/wav wav;
video/ogg ogv ogg;
video/mp4 mp4;
video/webm webm;
}Como Adicionar Legendas e Closed Captions
Faixas de texto como legendas e closed captions são adicionadas a arquivos de áudio e vídeo por meio do elemento <track>, que é colocado como filho de <audio> ou <video>. Cada faixa aponta para um arquivo WebVTT (.vtt).
Fornecer closed captions para mídias pré-gravadas é um requisito de acessibilidade: um <track kind="captions"> satisfaz o Critério de Sucesso 1.2.2 do WCAG 2.1, no qual usuários surdos e com deficiência auditiva dependem para compreender o áudio.
O atributo kind informa ao navegador que tipo de faixa de texto é:
subtitles— traduções ou transcrições de diálogos para espectadores que podem ouvir, mas não entendem o idioma. Este é o valor padrão.captions— semelhante a legendas, mas também descreve efeitos sonoros e outras indicações de áudio para espectadores que não podem ouvir.descriptions— uma descrição textual do conteúdo do vídeo, destinada a ser lida em voz alta para usuários que não podem ver a tela.chapters— títulos de capítulos usados para navegar pela mídia.metadata— faixas usadas por scripts e não exibidas ao usuário.
Exemplo de adição de closed captions a um arquivo de vídeo:
Closed captions para um arquivo de vídeo com o elemento track
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="captions" label="English" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt" />
</video>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Para alinhar o player de vídeo na página, coloque o elemento <video> dentro do container <div>, atribua uma classe a ele e defina a largura e a altura correspondentes ao tamanho do seu vídeo.
Atributos de Áudio e Vídeo
| Atributo | Descrição |
|---|---|
| autoplay | Permite que o áudio/vídeo comece a ser reproduzido automaticamente enquanto o restante da página está carregando. |
| controls | Permite controlar a reprodução do áudio/vídeo, incluindo volume, pausar/retomar a reprodução. |
| loop | Permite que o áudio/vídeo seja reproduzido novamente sempre que terminar. |
| muted | Faz a mídia ser reproduzida com o som desativado por padrão. |
| preload | Especifica o armazenamento em buffer de arquivos grandes. Pode ter um destes valores: "none" (não armazena o arquivo em buffer), "auto" (armazena o arquivo de mídia em buffer) ou "metadata" (armazena em buffer apenas os metadados do arquivo). |
| src | A URL do áudio/vídeo a ser incorporado. É opcional. |
| poster | Esta é a URL de uma imagem exibida antes que o vídeo seja reproduzido. |
| width | Especifica a largura da área de exibição do vídeo, em pixels CSS. |
| height | Especifica a altura da área de exibição do vídeo, em pixels CSS. |