Cum funcționează elementele audio și video?

Question

Accepted Answer

`<audio>` și `<video>` încorporează media nativ, cu comenzi încorporate și un API JavaScript — nu sunt necesare plugin-uri.

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

## Atribute cheie

- **`controls`** — fără aceasta, nu apare nicio interfață (controlez via JS).
- **multiple `<source>`** — browserul folosește primul format pe care îl suportă (WebM/MP4 pentru compatibilitate între browsere).
- **`poster`** — imagine de substituție înainte de redare.
- **`preload`** — `none` / `metadata` / `auto`; utilizează `metadata` pentru a evita descărcarea fișierelor mari până când sunt necesare.
- **`autoplay muted loop`** — pentru videoclipuri de fundal (majoritatea browserelor **necesită `muted`** pentru a permite autoplay).
- **`<track>`** — subtitrări/titluri pentru accesibilitate (un fișier `.vtt`).

## Controlul cu 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>` funcționează identic, doar fără cadrul vizual/poster.

## De ce este important

Elementele de media native vă oferă redare compatibilă între browsere, accesibilitate (subtitrări via `<track>`), și un API JavaScript complet pentru playere personalizate.

Cunoașterea modelului de fallback de format, regula `muted` pentru autoplay și `preload` pentru performanță acoperă esențialele practice ale încorporării media.