Hur fungerar audio- och videoelementen?

Question

Accepted Answer

`<audio>` och `<video>` bäddar in media nativt, med inbyggda kontroller och ett JavaScript-API — inga plugins behövs.

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

## Viktiga attribut

- **`controls`** — utan det visas inget gränssnitt (du skulle styra via JS).
- **flera `<source>`** — webbläsaren använder det första format som den stöder (WebM/MP4 för webblässöverskridande).
- **`poster`** — platshållarebild före uppspelning.
- **`preload`** — `none` / `metadata` / `auto`; använd `metadata` för att undvika att ladda ner stora filer tills det behövs.
- **`autoplay muted loop`** — för bakgrundsvideor (de flesta webbläsare **kräver `muted`** för att tillåta autouppspelning).
- **`<track>`** — bildtexter/undertexter för tillgänglighet (en `.vtt`-fil).

## Styrning 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>` fungerar identiskt, bara utan det visuella ramverket/plakatet.

## Varför det spelar roll

Nativa medieelement ger dig webbläsaröverskridande uppspelning, tillgänglighet (bildtexter via `<track>`), och ett fullständigt JS-API för anpassade spelare.

Att känna till formatfallback-mönstret, regeln `muted`-för-autouppspelning, och `preload` för prestanda täcker de praktiska väsentligheterna för att bädda in media.