Como você aprendeu no módulo Imagens, o HTML permite a incorporação de mídia em uma página da Web. Nesta seção, analisaremos arquivos de áudio e vídeo, incluindo como incorporá-los, controles do usuário, fornecimento de um marcador de posição de imagem estática para seus vídeos e práticas recomendadas, incluindo como tornar 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 de 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 oferece suporte aos 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 fonte com o atributo src vinculado à origem do vídeo. O atributo poster
fornece uma imagem para mostrar enquanto o vídeo é carregado. Por fim, o atributo controls fornece controles de vídeo do usuário.
O conteúdo substituto é incluído entre as tags de abertura e de fechamento. Se o user agent não for compatível com <video> (ou <audio>, esse conteúdo será exibido). A tag de fechamento </video> é necessária, mesmo que não haja conteúdo entre os dois
(mas sempre deve haver conteúdo substituto , certo?).
Se nenhum atributo src estiver incluído nas tags <video> ou <audio> de abertura, inclua um ou mais elementos <source>,
cada um com um atributo src em 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 de <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 conseguiria decodificar.
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 que ainda não têm suporte
em todos os navegadores. O codec é separado do tipo de mídia por 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 é o nível 4.2 do perfil principal da codificação de vídeo avançada. Explicar essa sintaxe está muito além
do escopo desta lição. Jake Archibald tem uma postagem que explica como determinar o parâmetro do codec para um vídeo AV1
se você quiser saber mais.
Por padrão, ao exibir um vídeo, o primeiro quadro do vídeo é mostrado como imagem estática quando fica disponível.
Isso pode ser controlado. O atributo poster permite que a origem de uma imagem seja exibida enquanto o vídeo é transferido por download
e até que ele seja reproduzido. Se o vídeo for reproduzido e depois for pausado, o pôster não será exibido novamente.
Defina a proporção do seu vídeo, porque, quando ele for 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 boolean controls. Isso torna os controles do usuário
visíveis, oferecendo 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. Alguns navegadores não obedecerão à diretiva do 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 do usuário, mesmo quando silenciada e com controles visíveis.
Músicas
Entre as tags de abertura e de fechamento obrigatórias de áudio e vídeo, inclua um ou mais elementos <track>
para especificar as 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 que o documento HTML, a menos que o atributo
crossorigin esteja incluído.
Há cinco valores enumerados para o atributo kind da faixa: subtitles, captions, descriptions, chapters e outro 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 ao usuário. O conteúdo da opção "VTT" selecionada é exibido sobre o vídeo. A aparência dos subtítulos pode ser estilizada 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, então ativou as legendas. Ou talvez ele não
tenha entendido os últimos pontos de discussão de um podcast favorito e, assim, queira ler a transcrição para confirmar o entendimento.
Ter alternativas para acessar o conteúdo de áudio e vídeo é importante e conveniente.
O kind="description" serve para descrições em texto do conteúdo visual no vídeo para usuários que não conseguem ver o vídeo, não importa se
usam um sistema sem tela, como o Google Home ou a Alexa, ou são cegos.
A exibição de legendas usando o formato WebVTT (link em inglês) torna o vídeo acessível a pessoas com deficiência auditiva. Lembre-se, deficiência é um incompatibilidade entre uma pessoa e o ambiente atual. A deficiência auditiva pode ocorrer quando o usuário está em um ambiente barulhento, tem alto-falantes defeituosos ou fones de ouvido quebrados, ou porque o usuário tem perda auditiva ou é surdo. Garantir que seu conteúdo seja acessível ajuda muito mais pessoas do que você imagina, isso ajuda todos.
Considerações sobre o vídeo em segundo plano
É recomendável que sua equipe de marketing ou design inclua um vídeo de plano de fundo no site. Geralmente, isso significa que eles querem um vídeo sem som, com reprodução automática, em loop e sem controles. O HTML pode ser semelhante a este:
<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 vídeos em segundo plano sem que os usuários tenham controle total
da reprodução e do acesso a todas as legendas. Como esse vídeo é apenas decorativo, ele inclui o papel ARIA
de none e omite qualquer conteúdo substituto.
Para melhorar o desempenho 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, mas qualquer item
com o atributo booleano loop será repetido para sempre por padrão, excedendo esse limite de tempo de cinco segundos ou qualquer outro. Para uma boa
experiência do usuário, sempre inclua um método de pausar o vídeo. Isso é feito com mais facilidade incluindo 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
o JavaScript para adicionar controles de mídia personalizados e remover o atributo de controles. 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>
Esse exemplo inclui um botão com atributos dataset contendo o texto que vai ser atualizado quando o visitante alternar
entre os estados de reprodução e pausa. O atributo aria-controls está incluído no id do elemento controlado pelo botão.
Nesse 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 o vídeo), mesmo se o JavaScript falhar.
Só remova o atributo "controls" depois que um botão substituto for instanciado
document.querySelector('[aria-controls]').removeAttribute('controls');
Sempre inclua controles externos quando os usuários não puderem acessar os controles, como no caso de vídeos em segundo plano que tenham controles ocultos pelo conteúdo do site. É importante entender os conceitos básicos dos requisitos de acessibilidade de mídia para atender a usuários com
diferentes necessidades ambientais e sensoriais, incluindo os milhões de pessoas com perda auditiva e deficiência visual.
Acabamos de mencionar o HTMLMediaElement, que fornece várias propriedades, métodos e eventos herdados por
HTMLVideoElement e
HTMLAudioElement, com HTMLMediaElement adicionando algumas propriedades,
métodos e eventos próprios. Existem várias outras APIs Media,
incluindo uma API TextTrack. Você pode usar as APIs Media Capture 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, salvar ou enviar o áudio para o elemento <audio>.
Teste seu conhecimento
Teste seus conhecimentos sobre áudio e vídeo.
Para que o elemento <track> é usado?
O que o atributo poster controla?