Wie funktionieren die Audio- und Video-Elemente?

Question

Accepted Answer

`<audio>` und `<video>` betten Media nativ ein, mit integrierten Steuerelementen und einer JavaScript-API — ohne Plugins.

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

## Wichtige Attribute

- **`controls`** — ohne sie wird keine UI angezeigt (Steuerung erfolgt über JS).
- **mehrere `<source>`** — der Browser verwendet das erste unterstützte Format (WebM/MP4 für Cross-Browser-Kompatibilität).
- **`poster`** — Platzhalterbild vor dem Abspielen.
- **`preload`** — `none` / `metadata` / `auto`; verwenden Sie `metadata`, um zu vermeiden, dass große Dateien heruntergeladen werden, bis sie benötigt werden.
- **`autoplay muted loop`** — für Videos im Hintergrund (die meisten Browser **erfordern `muted`**, um Autoplay zu erlauben).
- **`<track>`** — Untertitel/Beschriftungen für Barrierefreiheit (eine `.vtt` Datei).

## Steuerung mit 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>` funktioniert identisch, nur ohne den visuellen Frame/das Poster.

## Warum es wichtig ist

Native Media-Elemente bieten browserübergreifende Wiedergabe, Barrierefreiheit (Untertitel über `<track>`) und eine vollständige JS-API für Custom Player.

Das Verständnis des Format-Fallback-Musters, der `muted`-für-Autoplay-Regel und `preload` für Performance deckt die praktischen Grundlagen des Media-Einbettens ab.