Jak działają elementy audio i video?

Question

Accepted Answer

`<audio>` i `<video>` osadzają multimedia natywnie, z wbudowanymi kontrolkami i interfejsem API JavaScript — bez potrzeby wtyczek.

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

## Kluczowe atrybuty

- **`controls`** — bez tego nie pojawia się interfejs użytkownika (kontrolujesz poprzez JS).
- **wiele `<source>`** — przeglądarka używa pierwszego obsługiwanego formatu (WebM/MP4 dla cross-browser).
- **`poster`** — obraz zastępczy przed odtworzeniem.
- **`preload`** — `none` / `metadata` / `auto`; użyj `metadata`, aby uniknąć pobierania dużych plików, dopóki nie będą potrzebne.
- **`autoplay muted loop`** — dla filmów w tle (większość przeglądarek **wymaga `muted`** aby zezwolić na autoplay).
- **`<track>`** — napisy/podpisy dla dostępności (plik `.vtt`).

## Kontrolowanie za pomocą 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>` działa identycznie, tylko bez ramki wizualnej/plakatu.

## Dlaczego to ważne

Natywne elementy mediów dają ci odtwarzanie na wielu przeglądarkach, dostępność (napisy poprzez `<track>`), i pełny interfejs API JavaScript dla odtwarzaczy niestandardowych.

Znajomość wzorca rezerwowego formatów, reguły `muted` dla autoplay i `preload` dla wydajności obejmuje praktyczne essencje osadzania mediów.