Mídia: vídeo e áudio
O curso trata dos elementos nativos de vídeo e áudio do HTML e de por que substituíram plugins como o Flash. Mostra as partes de um player de vídeo: src, controls, poster, width e height, além de vários elementos source como reserva de formato. Aborda o audio e o atributo preload, as políticas que bloqueiam autoplay com som e as legendas com track e WebVTT. No fim, trata de conteúdo de reserva, do atributo type e de uma página de produto que junta um loop decorativo e uma demonstração legendada.
O que você vai aprender
- ✓Como os elementos nativos de vídeo e áudio diferem dos players baseados em plugin
- ✓Uso de src, controls, poster, width, height e preload nos elementos de mídia
- ✓Ordem de vários elementos source para o navegador escolher um formato suportado
- ✓Qual combinação de atributos faz o autoplay funcionar e quando evitá-lo
- ✓Legendas para surdos e legendas de tradução com track e arquivos WebVTT
- ✓Conteúdo de reserva, o atributo type e o canPlayType
Por que video/audio nativos ganham de um plugin
Antes do HTML5, tocar vídeo no navegador significava embutir um plugin, quase sempre o Adobe Flash. Ele ocupava um retângulo opaco, e o navegador lhe entregava o controle. O DOM, a árvore de acessibilidade, a navegação por teclado e o CSS paravam na borda daquele retângulo. O que acontecia dentro…
Ler a aula completa grátis →Currículo
7 aulasPor que video/audio nativos ganham de um plugin
Compara plugins opacos como o Flash com elementos nativos de vídeo e áudio que fazem parte do DOM.
video: a anatomia de um player de vídeo
Explica src, controls, poster, width e height, além de vários filhos source para reserva entre WebM e MP4.
audio: a mesma ideia, sem a imagem
Trata do elemento audio, dos valores de preload, da ordem entre Opus e MP3 e da necessidade de transcrição.
Autoplay, muted, e por que os navegadores brigam ativamente com você
Mostra por que os navegadores bloqueiam autoplay com som e reserva autoplay mudo para vídeo decorativo.
Legendas e closed captions com track
Diferencia captions de subtitles, adiciona elementos track com arquivos WebVTT e cita a exigência de legendas do WCAG.
Conteúdo de reserva e suporte de formato
Explica o conteúdo entre as tags de mídia, o atributo type no source, a ordem de formatos e o canPlayType.
Juntando tudo: um vídeo real de demonstração de produto
Monta uma página de produto com um loop decorativo de fundo, uma demonstração legendada e um checklist de mídia.