Kaip veikia garso ir vaizdo elementai?

Question

Accepted Answer

`<audio>` ir `<video>` vietoje įterpia mediją su įmontuotomis valdikliais ir JavaScript API — jokių papildinių nereikia.

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

## Pagrindiniai atributai

- **`controls`** — be jo nėra jokio UI (valdymas per JS).
- **keletas `<source>`** — naršyklė naudoja pirmą palaikomą formatą (WebM/MP4 dėl skirtingų naršyklių).
- **`poster`** — viršelis prieš leisti.
- **`preload`** — `none` / `metadata` / `auto`; naudokite `metadata` kad neprisisiūstų dideli failai kol jie nereikalingi.
- **`autoplay muted loop`** — galinės vaizdo įrašams (dauguma naršyklių **reikalingas `muted`** norint leisti autoplay).
- **`<track>`** — antraštės/subtitrai prieinamumui (`.vtt` failas).

## Valdymas su 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>` veikia identiškai, tik be vaizdo kadro/plakato.

## Kodėl tai svarbu

Vietiniai medijos elementai teikia saugojimo skaitymą skirtingose naršyklėse, prieinamumą (subtitrai per `<track>`), ir pilną JS API pasirinktiniams grotuvatams.

Žinoti formatų fallback modelį, `muted`-autoplay taisyklę ir `preload` našumui yra gana pagrindinis medijos įterpimo žinojimas.