Hoe werken de audio- en video-elementen?

Question

Accepted Answer

`<audio>` en `<video>` voegen media native in, met ingebouwde besturingselementen en een JavaScript API — geen plugins nodig.

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

## Sleutelattributen

- **`controls`** — zonder dit verschijnt geen UI (je bestuurt via JS).
- **meerdere `<source>`** — de browser gebruikt de eerste ondersteunde indeling (WebM/MP4 voor cross-browser).
- **`poster`** — plaatseropbeelding vóór afspelen.
- **`preload`** — `none` / `metadata` / `auto`; gebruik `metadata` om te voorkomen dat grote bestanden worden gedownload totdat nodig.
- **`autoplay muted loop`** — voor achtergrondvideo's (de meeste browsers **vereisen `muted`** om autoplay toe te staan).
- **`<track>`** — bijschriften/ondertitels voor toegankelijkheid (een `.vtt`-bestand).

## Beheren met 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>` werkt identiek, alleen zonder het visuele frame/poster.

## Waarom het belangrijk is

Natieve media-elementen bieden je cross-browser afspelen, toegankelijkheid (ondertitels via `<track>`), en een volledige JS API voor aangepaste spelers.

De format-fallback patroon, de `muted`-voor-autoplay regel en `preload` voor prestaties begrijpen dekt de praktische essentiëlen van het insluiten van media.