Kako funkcioniraju audio i video elementi?

Question

Accepted Answer

`<audio>` i `<video>` ugrađuju mediju nativno, s ugrađenim kontrolama i JavaScript API — nisu potrebni nikakvi priključci.

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

## Ključni atributi

- **`controls`** — bez njega, nema UI-ja (kontrolirali biste preko JS-a).
- **višestruki `<source>`** — preglednik koristi prvi format koji podržava (WebM/MP4 za kompatibilnost između preglednika).
- **`poster`** — slika rezervnog mjesta prije reprodukcije.
- **`preload`** — `none` / `metadata` / `auto` ; koristite `metadata` kako biste izbjegli preuzimanje velikih datoteka dok nisu potrebne.
- **`autoplay muted loop`** — za videozapise u pozadini (većina preglednika **zahtijeva `muted`** kako bi dozvolila autoplay).
- **`<track>`** — titlovi/podnaslovi za dostupnost (datoteka `.vtt`).

## Kontrola s JavaScriptom

```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>` funkcionira identično, samo bez vizualnog okvira/postera.

## Zašto je to važno

Nativni medijski elementi pružaju vam reprodukciju između preglednika, dostupnost (titlovi preko `<track>`), i potpuni JS API za prilagođene reproduktore.

Znati uzorak format-fallback, pravilo `muted`-za-autoplay, i `preload` za performanse pokriva praktične nužnosti ugrađivanja medije.