Bagaimana cara kerja elemen audio dan video?

Question

Accepted Answer

`<audio>` dan `<video>` menyematkan media secara native, dengan kontrol bawaan dan API JavaScript — tidak perlu plugin.

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

- **`controls`** — tanpanya, tidak ada UI yang muncul (Anda akan mengontrol melalui JS).
- **multiple `<source>`** — browser menggunakan format pertama yang didukungnya (WebM/MP4 untuk lintas-browser).
- **`poster`** — gambar placeholder sebelum diputar.
- **`preload`** — `none` / `metadata` / `auto` ; gunakan `metadata` untuk menghindari mengunduh file besar sampai diperlukan.
- **`autoplay muted loop`** — untuk video latar belakang (sebagian besar browser **memerlukan `muted`** untuk memungkinkan autoplay).
- **`<track>`** — caption/subtitle untuk aksesibilitas (file `.vtt`).

## Kontrol dengan 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>` bekerja sama persis, hanya tanpa frame visual/poster.

## Mengapa ini penting

Elemen media native memberikan Anda pemutaran lintas-browser, aksesibilitas (caption via `<track>`), dan API JS lengkap untuk pemain khusus.

Mengetahui pola format-fallback, aturan `muted`-untuk-autoplay, dan `preload` untuk kinerja mencakup hal-hal penting praktis dari penyisipan media.