Come funzionano gli elementi audio e video?

Question

Accepted Answer

`<audio>` e `<video>` incorporano media nativamente, con controlli integrati e un'API JavaScript — nessun plugin necessario.

```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>
```

## Attributi chiave

- **`controls`** — senza di esso, nessuna UI appare (controlli via JS).
- **multiple `<source>`** — il browser utilizza il primo formato che supporta (WebM/MP4 per cross-browser).
- **`poster`** — immagine placeholder prima della riproduzione.
- **`preload`** — `none` / `metadata` / `auto`; usa `metadata` per evitare di scaricare file grandi fino a quando non necessario.
- **`autoplay muted loop`** — per video di sfondo (la maggior parte dei browser **richiede `muted`** per consentire autoplay).
- **`<track>`** — sottotitoli/didascalie per l'accessibilità (un file `.vtt`).

## Controllo con 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>` funziona identicamente, solo senza il fotogramma visivo/poster.

## Perché è importante

Gli elementi media nativi ti offrono riproduzione cross-browser, accessibilità (sottotitoli via `<track>`), e un'API JS completa per player personalizzati.

Conoscere il pattern format-fallback, la regola `muted`-per-autoplay, e `preload` per le prestazioni copre gli aspetti pratici essenziali dell'incorporamento di media.