Hvordan fungerer audio- og video-elementerne?

Question

Accepted Answer

`<audio>` og `<video>` indlejrer medier nativt med indbyggede kontroller og et JavaScript API — uden plugin-krav.

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

## Vigtige attributter

- **`controls`** — uden det vises der ingen UI (du styrer via JS).
- **multiple `<source>`** — browseren bruger det første format, den understøtter (WebM/MP4 til browser-kompatibilitet).
- **`poster`** — placeholder-billede før afspilning.
- **`preload`** — `none` / `metadata` / `auto`; brug `metadata` for at undgå at downloade store filer, før de er nødvendige.
- **`autoplay muted loop`** — til bagground-videoer (de fleste browsere **kræver `muted`** for at tillade autoplay).
- **`<track>`** — billedtekster/undertekster for tilgængelighed (en `.vtt` fil).

## Kontrol 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, blot uden det visuelle billede/poster.

## Hvorfor det er vigtigt

Native medieelementer giver dig browser-kompatibel afspilning, tilgængelighed (billedtekster via `<track>`) og et fuldt JS API til brugerdefinerede afspillere.

At kende format-fallback-mønsteret, `muted`-for-autoplay-reglen og `preload` til ydeevne dækker de praktiske grundlæggende elementer ved medieindsætning.

Vigtige attributter

Kontrol med JavaScript

Hvorfor det er vigtigt

question.related