Como funcionam os elementos de áudio e vídeo?

Question

Accepted Answer

`<audio>` e `<video>` incorporam mídia nativamente, com controles integrados e uma API JavaScript — sem plugins necessários.

```html
<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> 
  <source src="video.mp4" type="video/mp4" />   
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> 
  Your browser does not support video.          
</video>
```

## Atributos principais

- **`controls`** — sem isso, nenhuma UI aparece (você controla via JS).
- **múltiplos `<source>`** — o navegador usa o primeiro formato que suporta (WebM/MP4 para compatibilidade entre navegadores).
- **`poster`** — imagem de espaço reservado antes da reprodução.
- **`preload`** — `none` / `metadata` / `auto`; use `metadata` para evitar baixar arquivos grandes até que sejam necessários.
- **`autoplay muted loop`** — para vídeos de fundo (a maioria dos navegadores **requer `muted`** para permitir autoplay).
- **`<track>`** — legendas/subtítulos para acessibilidade (um arquivo `.vtt`).

## Controlando com JavaScript

```js
const v = document.querySelector("video");
v.play();           // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
```

`<audio>` funciona de forma idêntica, apenas sem o quadro visual/cartaz.

## Por que isso importa

Elementos de mídia nativos oferecemreprodução entre navegadores, acessibilidade (legendas via `<track>`), e uma API JavaScript completa para players personalizados.

Conhecer o padrão de fallback de formato, a regra `muted` para autoplay e `preload` para desempenho cobre os essenciais práticos de incorporação de mídia.