Kako delujeta audio in video elementa?

Question

Accepted Answer

`<audio>` in `<video>` vgrajevata medije v brskalk, z vgrajenim nadzorom in JavaScript API — ni potrebnih vtičnikov.

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

## Ključni atributi

- **`controls`** — brez tega se noben vmesnik ne prikaže (nadzor bi bil prek JS).
- **večkratni `<source>`** — brskalnik uporabi prvi format, ki ga podpira (WebM/MP4 za večbrskalnično podporo).
- **`poster`** — slika ogledala pred predvajanjem.
- **`preload`** — `none` / `metadata` / `auto`; uporabite `metadata`, da se izognete prenosu velikih datotek, dokler se ne potrebuje.
- **`autoplay muted loop`** — za videoposnetke v ozadju (večina brskalnikov **zahteva `muted`**, da dovolijo samodejni zagon).
- **`<track>`** — napisi/podnapisi za dostopnost (datoteka `.vtt`).

## Nadzor s programom 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>` deluje enako, le brez vizualnega okvira/plakate.

## Zakaj je to pomembno

Nativni elementi medijskih vsebin vam omogočajo predvajanje v različnih brskalnikih, dostopnost (napisi prek `<track>`) in popoln JS API za prilagojene predvajalnike.

Znanje vzorca fallback-a oblike, pravila `muted`-za-samodejni-zagon in `preload` za učinkovitost pokriva praktične osnove vgrajevanja medijev.