Áudio e vídeo

Como você aprendeu no módulo Imagens, o HTML permite incorporar mídia em uma página da Web. Nesta seção, vamos analisar arquivos de áudio e vídeo, incluindo como incorporá-los, controles do usuário, como fornecer um marcador de posição de imagem estática para seus vídeos e práticas recomendadas, incluindo como tornar os arquivos de áudio e vídeo acessíveis.

<audio> e <video>

Os elementos <video> e <audio> podem ser usados para incorporar players de mídia diretamente com o atributo src ou como o elemento contêiner de uma série de elementos <source>, cada um fornecendo uma sugestão de arquivo src. Embora <video> possa ser usado para incorporar um arquivo de áudio, o elemento <audio> é preferível para incorporar arquivos de som.

As tags de abertura <video> e <audio> podem conter vários outros atributos, incluindo controls, autoplay, loop, mute, preload e os atributos globais. O elemento <video> também é compatível com os atributos height, width e poster.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Este exemplo de <video> tem uma única origem com o atributo src vinculado à origem do vídeo. O atributo poster fornece uma imagem para exibição enquanto o vídeo é carregado. Por fim, o atributo controls oferece controles de vídeo para o usuário.

O conteúdo substituto é incluído entre as tags de abertura e fechamento. Se o user agent não for compatível com <video> (ou <audio>, esse conteúdo será mostrado. A tag de fechamento </video> é obrigatória, mesmo que não haja conteúdo entre as duas (mas sempre deve haver conteúdo substituto , certo?).

Se nenhum atributo src for incluído nas tags de abertura <video> ou <audio>, inclua um ou mais elementos <source>, cada um com um atributo src para um arquivo de mídia. O exemplo a seguir inclui três opções de arquivo de mídia, conteúdo substituto e legendas em inglês e francês entre as tags de abertura e fechamento.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Cada filho <source> inclui um atributo src que aponta para o recurso, e o atributo type informa ao navegador o tipo de mídia do arquivo vinculado. Isso impede que o navegador busque arquivos de mídia que não podem ser decodificados.

No atributo type, é possível incluir um parâmetro codecs, que especifica exatamente como o recurso é codificado. Os codecs oferecem uma maneira de incluir otimizações de mídia como melhorias progressivas (elementos não compatíveis com todos os navegadores). O codec é separado do tipo de mídia com um ponto e vírgula. Por exemplo, o codec pode ser escrito usando uma sintaxe intuitiva, como <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, que indica que os arquivos WebM contêm vídeo VP8 e áudio vorbis.

Os codecs também podem ser mais difíceis de decifrar, como <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, que indica que a codificação MP4 é Advanced Video Coding Main Profile Level 4.2. Explicar essa sintaxe está muito além do escopo desta lição. Para mais detalhes, leia a postagem de Jake Archibald sobre como determinar o parâmetro de codec para um vídeo AV1.

Ao exibir um vídeo, por padrão, o primeiro frame é mostrado como a imagem estática quando fica disponível. Isso pode ser controlado. O atributo poster permite que a origem de uma imagem seja mostrada enquanto o vídeo está sendo baixado e até que seja reproduzido. Se o vídeo for reproduzido e depois pausado, o pôster não será mostrado novamente.

Defina a proporção do vídeo, porque, quando ele é carregado, uma diferença de tamanho entre o pôster e o vídeo causa um refluxo e uma repintura.

Sempre inclua o atributo controls booleano. Isso torna os controles do usuário visíveis, permitindo que eles controlem os níveis de áudio, silenciem o áudio completamente e expandam o vídeo para tela cheia. Omitir controls cria uma experiência do usuário ruim, especialmente se o atributo booleano autoplay for incluído. Alguns navegadores não obedecem à diretiva de atributo autoplay se o atributo booleano muted for omitido, porque a reprodução automática de um arquivo de mídia geralmente é uma experiência ruim para o usuário, mesmo quando silenciada e com controles visíveis.

Músicas

Entre as tags de abertura e fechamento obrigatórias de áudio e vídeo, inclua um ou mais elementos <track> para especificar faixas de texto com marcação de tempo. O exemplo a seguir inclui dois arquivos <track>, fornecendo legendas de texto com marcação de tempo em inglês e francês.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

Os arquivos de faixa, especificados no atributo src, precisam estar no formato WebVTT (.vtt). Os arquivos precisam estar no mesmo domínio do documento HTML, a menos que o atributo crossorigin seja incluído.

Há cinco valores enumerados para o atributo kind da faixa: subtitles, captions, descriptions, chapters e outros metadata.

Inclua subtitles junto com o atributo srclang para transcrição e traduções de diálogos. O valor de cada atributo label é mostrado como uma opção para o usuário. O conteúdo da opção VTT selecionada é exibido sobre o vídeo. A aparência das legendas pode ser estilizada segmentando ::cue/ ::cue().

O valor kind="caption" deve ser reservado para transcrições e traduções que incluem efeitos sonoros e outras informações de áudio relevantes. Isso não é apenas para espectadores surdos. Talvez um usuário não consiga encontrar os fones de ouvido e ative as legendas. Ou talvez não tenham entendido os últimos pontos de um podcast favorito e queiram ler a transcrição para confirmar o que entenderam. É importante e conveniente ter maneiras alternativas de acessar conteúdo de áudio e vídeo.

O kind="description" é para descrições de texto do conteúdo visual no vídeo para usuários que não conseguem assistir, seja porque estão usando um sistema sem tela, como o Google Home ou a Alexa, ou porque são cegos.

Adicionar legendas usando o formato WebVTT torna o vídeo acessível a pessoas com deficiência auditiva. A perda auditiva pode ser causada por um ambiente barulhento, alto-falantes ou fones de ouvido com defeito ou quebrados, ou porque a pessoa tem perda auditiva ou se identifica como surda. Garantir que seu conteúdo seja acessível ajuda muito mais pessoas do que você imagina. Ele ajuda todo mundo.

Considerações sobre o vídeo de plano de fundo

Sua equipe de marketing ou design pode querer que o site inclua um vídeo em segundo plano. Em geral, isso significa que eles querem um vídeo sem som, de reprodução automática e em loop, sem controles. O HTML pode ficar assim:

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

Os vídeos em segundo plano não estão acessíveis. O conteúdo não pode ser transmitido por vídeos em segundo plano sem oferecer aos usuários controle total sobre a reprodução e acesso a todas as legendas. Como esse vídeo é puramente decorativo, ele inclui a função ARIA de none e omite qualquer conteúdo alternativo. Para melhorar a performance dos vídeos sempre silenciados, remova a faixa de áudio das suas fontes de mídia.

Se o vídeo for reproduzido por cinco segundos ou menos, as diretrizes de acessibilidade não exigirão um mecanismo de pausa. No entanto, qualquer coisa com o atributo booleano loop será repetida para sempre por padrão, excedendo esse limite de cinco segundos ou qualquer outro. Para uma boa experiência do usuário, sempre inclua um método de pausa do vídeo. A maneira mais fácil de fazer isso é incluir controls.

Controles de mídia personalizados

Para mostrar controles personalizados de vídeo ou áudio em vez dos controles integrados do navegador, inclua o atributo controls. Em seguida, use JavaScript para adicionar controles de mídia personalizados e remover o atributo "controls". Por exemplo, você pode adicionar um <button> que alterna o estado de reprodução de um arquivo de áudio.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Este exemplo inclui um botão com atributos dataset que contêm o texto que é atualizado conforme o visitante alterna entre os estados de reprodução e pausa. O atributo aria-controls é incluído com o id do elemento controlado pelo botão. Neste caso, o áudio. Cada botão que controla o áudio tem um manipulador de eventos.

Para criar controles personalizados, use HTMLMediaElement.play() e HTMLMediaElement.pause(). Ao alternar o estado de reprodução, alterne também o texto do botão:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

Ao incluir o atributo controls, o usuário tem uma maneira de controlar o áudio (ou vídeo) mesmo que o JavaScript falhe. Remova o atributo "controls" somente depois que um botão de substituição for instanciado.

document.querySelector('[aria-controls]').removeAttribute('controls');

Sempre inclua controles externos quando os usuários não puderem acessar os controles, como em vídeos em segundo plano que têm os controles ocultos atrás do conteúdo do site. É importante entender os princípios básicos dos requisitos de acessibilidade de mídia para atender aos usuários com diferentes necessidades ambientais e sensoriais, incluindo os milhões de pessoas com perda auditiva e deficiência visual. Acabamos de falar sobre o HTMLMediaElement, que oferece várias propriedades, métodos e eventos herdados pelo HTMLVideoElement e pelo HTMLAudioElement. O HTMLMediaElement adiciona algumas propriedades, métodos e eventos próprios. Há várias outras APIs Media, incluindo uma API TextTrack. Você pode usar as APIs Media Capture and Streams e MediaDevices para gravar áudio do microfone de um usuário ou gravar a tela de um usuário. A API Web Audio permite manipular áudio ao vivo e pré-gravado e fazer streaming, salvar ou enviar o áudio para o elemento <audio>.

Teste seu conhecimento

Teste seus conhecimentos sobre áudio e vídeo.