Jak fungují prvky audio a video?

Question

Accepted Answer

`<audio>` a `<video>` vkládají média nativně, s vestavěnými ovládacími prvky a JavaScript API — bez nutnosti pluginů.

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

## Klíčové atributy

- **`controls`** — bez něj se nezobrazí žádné uživatelské rozhraní (kontrolu byste prováděli přes JS).
- **více `<source>`** — prohlížeč používá první formát, který podporuje (WebM/MP4 pro kompatibilitu mezi prohlížeči).
- **`poster`** — zástupný obrázek před přehráváním.
- **`preload`** — `none` / `metadata` / `auto`; použijte `metadata` abyste se vyhnuli stahování velkých souborů, dokud je nebudete potřebovat.
- **`autoplay muted loop`** — pro videa na pozadí (většina prohlížečů **vyžaduje `muted`** pro povolení automatického přehrávání).
- **`<track>`** — titulky/podtitulky pro přístupnost (soubor `.vtt`).

## Ovládání pomocí JavaScriptu

```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>` funguje stejně, jen bez vizuálního snímku/zástupného obrázku.

## Proč to důležité

Nativní prvky médií vám poskytují přehrávání kompatibilní s více prohlížeči, přístupnost (titulky přes `<track>`) a plný JS API pro vlastní přehrávače.

Znalost vzoru fallback formátů, pravidla `muted`-pro-autoplay a `preload` pro výkon pokrývá praktické základy vkládání médií.