Hogyan működnek az audio és video elemek?

Question

Accepted Answer

Az `<audio>` és `<video>` nativán ágyazza be a médiát, beépített vezérlőelemekkel és JavaScript API-val — nincs szükség bővítményre.

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

## Fő attribútumok

- **`controls`** — nélküle nem jelenik meg felhasználói felület (JS-en keresztül vezérelne).
- **több `<source>`** — a böngésző az első olyan formátumot használja, amelyet támogat (WebM/MP4 böngészőközi kompatibilitáshoz).
- **`poster`** — helyőrző kép lejátszás előtt.
- **`preload`** — `none` / `metadata` / `auto` ; a `metadata` segítségével kerülje el a nagy fájlok letöltését, amíg szükségesek.
- **`autoplay muted loop`** — háttérvideókhoz (a legtöbb böngésző **`muted`** kell az autoplay engedélyezéséhez**).
- **`<track>`** — feliratok/fordítások a hozzáférhetőséghez (`.vtt` fájl).

## Vezérlés JavaScripttel

```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"));
```

Az `<audio>` ugyanúgy működik, csak vizuális keret/poszter nélkül.

## Miért fontos

A natív médialemek böngészőközi lejátszást, akadálymentesítést (feliratok `<track>` segítségével) és teljes JS API-t biztosítanak egyéni lejátszókhoz.

A format-fallback minta, az `muted`-for-autoplay szabály és a `preload` teljesítményre ismerete a médiafeltöltés gyakorlati lényegét fedi le.