Áudio e vídeo

Vídeos

O elemento <video> é um elemento com conteúdo. No atributo src, você deve colocar o vídeo que você quer incorporar. Você também pode usar o atributo booleano controls, caso queira exibir controles do vídeo para pausá-lo, alterar seu volume, dentre outras coisas. O elemento <video> tem conteúdo. Ele é exibido como um fallback usado quando o navegador não suporta o elemento. Veja um exemplo de uso:

<video src="video.mp4" controls>
  <p>Seu navegador não suporta esse elemento. Você pode <a href="video.mp4">baixar o vídeo aqui</a>.</p> 
</video>

Você também pode incluir vídeos de múltiplos formatos. Nesse caso, você especifica cada opção no elemento <source>. O atributo type é usado para definir o MIME Type do vídeo. A vantagem de defini-lo é que os navegadores podem lê-lo e passar para o formato seguinte, se o MIME Type não for suportado. Isso é muito mais rápido do que ter que carregar e tentar tocar o vídeo para saber se ele é suportado.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Seu navegador não suporta esse elemento. Você pode <a href="video.mp4">baixar o vídeo aqui</a>.</p> 
</video>

O atributo poster define uma imagem exibida no vídeo até que ele seja carregado:

<video src="video.mp4" controls poster="poster-video.jpg">
  <p>Seu navegador não suporta esse elemento. Você pode <a href="video.mp4">baixar o vídeo aqui</a>.</p> 
</video>

Veja mais alguns atributos e a aplicação deles:

• autoplay: especifica que o vídeo vai começar a tocar assim que ele estiver pronto.
• loop: faz com que o vídeo volte para o começo automaticamente depois que terminar.
• muted: deixa o vídeo sem som.

Para vídeos usados como fundo é comum deixá-los sem controle, com ínicio automático, mudos e em loop:

<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>

Áudios

Áudios são incorporados usando o elemento <audio>. O arquivo de áudio é especificado no atributo src. O conteúdo do elemento é usado quando o elemento não é suportado pelo navegador. Exemplo:

<audio src="audio.mp3">
  <p>Seu navegador não suporta esse elemento. Você pode <a href="audio.mp3">baixar o áudio aqui</a>.</p> 
</audio>

O <audio> também tem os atributos autoplay, controls, loop e muted, que tem a mesma função que eles tem no elemento <video>.

Legendas

Legendas podem ser adicionadas a áudios e vídeos. Elas são úteis para pessoas com deficiência auditiva ou que não querem ou não podem ouvir o áudio ou vídeo, e também para pessoas que não entendem o idioma que está sendo falado. Elas são especificadas no formato WEBVTT. Os arquivos desse formato são linkados com o elemento <track>.

Não será explicado aqui como criar um arquivo WebVTT, porque está fora do escopo desse tutorial, mas você pode ver a especificação dele na W3.

Para exibir um arquivo WebVTT em uma mídia HTML, você precisa salvar o arquivo com a extensão .vtt, e linkar o arquivo salvo no elemento <track>. O elemento <track> deve ser colocado no <audio> ou <video> depois de todos os elementos <source>. Exemplo:

<video autoplay controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="legendas_pt.vtt" kind="subtitles" srclang="pt" label="Português">
  <track src="legendas_es.vtt" kind="subtitles" srclang="es" label="Español">
  <track src="legendas_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

O atributo src informa o caminho do arquivo com as legendas. O kind especifica o tipo dos dados da legenda. Pode ser "captions", "chapters", "descriptions", "metadata" ou "subtitles". O padrão é subtitles, ou seja, o atributo poderia ser omitido, nesse caso. O label é o nome da legenda que será exibido para o usuário. O atributo srclang informa qual é o idioma do conteúdo do arquivo, e é obrigatório se o kind for subtitles.