Áudio e vídeo

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

<audio> e <video>

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

As tags <video> e <audio> de abertura podem conter vários outros atributos, incluindo controls, autoplay, loop, mute, preload e os atributos globais. O elemento <video> também oferece suporte aos métodos 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 a ser exibida enquanto o vídeo é carregado. Por fim, o atributo controls fornece controles de vídeo do usuário.

O conteúdo de fallback é 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á exibido. A tag de fechamento </video> é obrigatória, mesmo que não haja conteúdo entre as duas (mas deve haver sempre conteúdo substituto , certo?).

Se nenhum atributo src estiver incluído na tag 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 do tipo de mídia do arquivo vinculado. Isso impede que o navegador para buscar arquivos de mídia que não seria possível decodificar.

No atributo type, você pode incluir um parâmetro codecs, que especifica exatamente como o recurso é codificado. Os codecs oferecem uma maneira de incluir otimizações de mídia que ainda não são compatíveis em 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 sintaxe intuitiva, como <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, que indica que a Os arquivos WebM contêm vídeo VP8 e áudio vorbis. Codecs também podem ser mais difíceis de decifrar, como <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> o que indica que a codificação MP4 é o perfil principal de codificação avançada de vídeo nível 4.2. Explicar essa sintaxe vai muito além o escopo desta aula. Jake Archibald tem uma postagem explicando como determinar o parâmetro do codec para um vídeo AV1 se quiser saber mais.

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

Defina a proporção do seu vídeo porque, quando ele é carregado, uma diferença de tamanho entre o pôster e o vídeo causará um reflow e uma nova pintura.

Sempre inclua o atributo booleano controls. Assim, o usuário controla visível, oferecendo aos usuários a capacidade de controlar os níveis de áudio, silenciar o áudio completamente e expandir o vídeo para tela cheia. A omissão de controls cria uma experiência do usuário ruim, especialmente se o atributo booleano autoplay estiver incluído. Algumas navegadores não atenderão à 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 má experiência para o usuário, mesmo quando silenciado e com controles visíveis.

Músicas

Entre as tags de abertura e fechamento obrigatórias de áudio e vídeo, inclua uma ou mais <track>. elementos 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 crossorigin é incluído.

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

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

O valor kind="caption" deve ser reservado para transcrição 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, por isso ativou as legendas. Ou talvez não pegar os últimos pontos de discussão de um podcast favorito, então eles querem ler a transcrição para confirmar o que entenderam. Ter maneiras alternativas de acessar o conteúdo de áudio e vídeo é importante e conveniente.

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

Fornecer legendas usar o formato WebVTT torna o vídeo acessível a pessoas com deficiência auditiva. Lembre-se, deficiência é uma incompatibilidade entre uma pessoa e seu ambiente atual. Uma deficiência auditiva pode ser causada o usuário está em um ambiente barulhento, tem alto-falantes defeituosos ou fones de ouvido quebrados, ou porque o usuário tem alguma perda auditiva ou é surda. Garantir que seu conteúdo seja acessível ajuda muito mais pessoas do que você imagina. isso ajuda a todos.

Considerações sobre vídeos em segundo plano

Sua equipe de marketing ou design pode querer que seu site inclua um vídeo de plano de fundo. Geralmente, isso significa que elas querem uma imagem vídeos com reprodução automática e em loop sem controles. O HTML pode ficar assim:

<video 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 podem ser acessados. O conteúdo não deve ser transmitido por meio de vídeos de fundo sem oferecer aos usuários controle sobre a reprodução e acesso a todas as legendas. Como este vídeo é apenas decorativo, ele inclui o papel ARIA de none e omite qualquer conteúdo substituto. Para melhorar o desempenho de vídeos sempre silenciados, remova a faixa de áudio das suas fontes de mídia.

Se o vídeo for reproduzido por até cinco segundos, as diretrizes de acessibilidade não exigirão um mecanismo de pausa, mas algo com o atributo booleano loop será repetido indefinidamente por padrão, excedendo esse limite de tempo de cinco segundos, ou qualquer outro. Para sempre do usuário, sempre inclua um método de pausa do vídeo. Isso é mais fácil de fazer ao incluir controls.

Controles de mídia personalizados

Para exibir controles personalizados de áudio ou vídeo 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 de controles. Por exemplo, é possível 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 contendo o texto que será atualizado à medida que o visitante alternar o acesso. entre os estados de reprodução e pausa. O atributo aria-controls está incluído no 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, também alternar 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;
  }
}

Com a inclusão do atributo controls, o usuário poderá controlar o áudio (ou vídeo), mesmo que o JavaScript falhe. Só remova o atributo "controls" quando 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 acontece com vídeos em segundo plano com controles ocultos por trás do conteúdo do site. É importante entender os conceitos básicos dos requisitos de acessibilidade de mídia para acomodar os usuários diferentes necessidades ambientais e sensoriais, incluindo as milhões de pessoas com perda auditiva e deficiência visual. Acabamos de abordar o HTMLMediaElement, que fornece várias propriedades, métodos e eventos que são herdados pelo HTMLVideoElement e HTMLAudioElement, com HTMLMediaElement adicionando algumas propriedades, métodos e eventos próprios. Há várias outras APIs de mídia, incluindo uma API TextTrack. Use as opções Captura de mídia e 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 e streaming ao vivo e pré-gravados, além de salvar ou enviar o áudio para o elemento <audio>.

Teste seu conhecimento

Teste seus conhecimentos sobre áudio e vídeo.