Miten audio- ja video-elementit toimivat?

Question

Accepted Answer

`<audio>` ja `<video>` upottavat mediaa natiivisti, sisäänrakennetuin ohjaimet ja JavaScript API — ilman lisäosien tarvetta.

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

## Tärkeät attribuutit

- **`controls`** — ilman sitä käyttöliittymää ei näy (hallinnoit JS:llä).
- **useita `<source>`** — selain käyttää ensimmäistä tukemaansa muotoa (WebM/MP4 selainten väliselle yhteensopivuudelle).
- **`poster`** — paikkamerkkikuva ennen toiston aloittamista.
- **`preload`** — `none` / `metadata` / `auto`; käytä `metadata` välttääksesi suurten tiedostojen lataamisen, kunnes sitä tarvitaan.
- **`autoplay muted loop`** — taustakuvioille (useimmat selaimet **vaativat `muted`** autoplay-toiannon sallimiseksi).
- **`<track>`** — kuvatekstit/tekstitykset saavutettavuuden vuoksi (`.vtt` tiedosto).

## Hallinta JavaScriptillä

```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>` toimii identtisesti, vain ilman visuaalista kehystä/julistetta.

## Miksi sillä on väliä

Natiivimedian elementit tarjoavat sinulle selainten välisen toiston, saavutettavuuden (kuvatekstit `<track>` kautta) ja täyden JavaScript API:n omille soittimille.

Muodon fallback-mallin, `muted`-autoplay-säännön ja `preload`-suorituskyvyn tunteminen kattaa median upottamisen käytännölliset perusasiat.