Hvordan fungerer lyd- og videoelementer?

Question

Accepted Answer

`<audio>` og `<video>` bygger inn media innfødt, med innebygde kontroller og et JavaScript API — ingen plugins trengs.

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

## Nøkkelattributter

- **`controls`** — uten det vises ingen UI (du kontrollerer via JS).
- **flere `<source>`** — nettleseren bruker det første formatet den støtter (WebM/MP4 for tvers-nettleser).
- **`poster`** — plassholder-bilde før avspilling.
- **`preload`** — `none` / `metadata` / `auto`; bruk `metadata` for å unngå å laste ned store filer før det er nødvendig.
- **`autoplay muted loop`** — for bakgrunnsvideo (de fleste nettlesere **krever `muted`** for å tillate autoplay).
- **`<track>`** — bildetekster/undertekster for tilgjengelighet (en `.vtt`-fil).

## Kontrollering med 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>` fungerer identisk, bare uten den visuelle rammen/plakaten.

## Hvorfor det betyr noe

Innfødte media-elementer gir deg tvers-nettleser-avspilling, tilgjengelighet (bildetekster via `<track>`), og et fullt JS API for egendefinerte avspillere.

Kjenne format-fallback-mønsteret, `muted`-for-autoplay-regelen og `preload` for ytelse dekker de praktiske essensielle sidene ved innbygging av media.