Pira carane elemen audio lan video bisa makarya?

Question

Accepted Answer

`<audio>` lan `<video>` nglebokake media sacara asli, kanthi kontrol bawaan lan API JavaScript — ora perlu plug-in.

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

## Atribut Kunci

- **`controls`** — tanpa iku, ora ana UI kang tampil (kontrol nggunakake JS).
- **`<source>` pirang-pirang** — browser nggunakake format pisanan sing didukung (WebM/MP4 kanggo cross-browser).
- **`poster`** — gambar placeholder sakdurunge diputer.
- **`preload`** — `none` / `metadata` / `auto`; gunakake `metadata` kanggo ora ngundhuh file gedhe nganti dibutuhake.
- **`autoplay muted loop`** — kanggo video latar (akeh browser **mbutuhake `muted`** kanggo ngidini autoplay).
- **`<track>`** — teks utawa subtitle kanggo aksesibilitas (file `.vtt`).

## Kontrol nganggo 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>` bisa makarya sing padha, mung tanpa frame visual/poster.

## Mengapa Iku Penting

Elemen media asli menehi puter lintas-browser, aksesibilitas (teks liwat `<track>`), lan API JS lengkap kanggo pemain custom.

Kaweruh pola format-fallback, aturan `muted`-kanggo-autoplay, lan `preload` kanggo performa nggubung kahanan praktis penting kanggo nglebokake media.