Por que video/audio nativos ganham de um plugin — Mídia: vídeo e áudio

Uma caixa-preta parafusada na página

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 era invisível para o resto da página.

<!-- O jeito antigo — um plugin, não parte da página -->
<object data="player.swf" type="application/x-shockwave-flash">
  <param name="movie" value="player.swf">
</object>

O que video e audio são

<video src="demo.mp4" controls></video>

É um nó de DOM de verdade, como na Aula 2 do curso de Fundamentos do DOM. Ele está na árvore de acessibilidade e na ordem de tabulação, e tem a própria API JavaScript (.play(), .pause(), .currentTime), sem plugin. Sem Flash, sem um runtime separado para instalar, sem caixa-preta que o resto da página não consegue enxergar.

O que isso te dá

Capacidade	Era dos plugins	video/audio nativos
Acessível por teclado por padrão	Não: dependia do plugin, muitas vezes quebrado	Sim: o Tab alcança, controles nativos respondem a teclas
Leitor de tela consegue identificar	Não: uma caixa-preta opaca	Sim: está na árvore de acessibilidade; legendas ficam para a Aula 5
Estilizável com CSS	Quase nada	Sim: as mesmas regras de tudo mais na página
Funciona sem instalar um plugin separado	Não	Sim: embutido em todo navegador moderno
Programável a partir de JavaScript comum	Só por pontes frágeis	Sim: uma API padrão e documentada

Os controles nativos que você ganha de graça

<video src="demo.mp4" controls width="640" height="360"></video>

O controls sozinho produz um player completo (play/pause, barra de progresso, volume, tela cheia) sem JavaScript nem CSS. Os controles de cada navegador têm aparência um pouco diferente. Todos são alcançáveis pelo teclado e rotulados para leitores de tela, algo que os players da era Flash raramente ofereciam.

Como este curso está organizado

Aula 2: video e a anatomia de um player: src, poster, controls, dimensões
Aula 3: audio, a mesma ideia sem a imagem
Aula 4: autoplay, muted e por que os navegadores o bloqueiam
Aula 5: legendas e closed captions com track, uma exigência de acessibilidade
Aula 6: conteúdo de reserva e suporte de formato entre navegadores
Aula 7: montando um vídeo de demonstração de produto de verdade, de ponta a ponta

Pontos-chave

O vídeo antes do HTML5 dependia de plugins (em geral Flash), opacos para o DOM, a acessibilidade, o teclado e o CSS.
<video>/<audio> são nós de DOM real com o próprio papel de acessibilidade, suporte a teclado, e API JavaScript, embutidos nativamente em todo navegador moderno.
O atributo controls sozinho produz um player nativo totalmente funcional e acessível, sem JavaScript ou CSS necessário.
Este curso cobre a stack de mídia nativa completa: anatomia do player, as restrições reais do autoplay, legendas acessíveis, e reservas de formato.