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.
Para que o elemento <track>
é usado?
O que o atributo poster
controla?