Bagaimanakah elemen audio dan video berfungsi?

Question

Accepted Answer

`<audio>` dan `<video>` membenamkan media secara asli, dengan kontrol bawaan dan API JavaScript — tiada plug-in diperlukan.

```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, tiada UI muncul (kontrol melalui JS).
- **berbilang `<source>`** — penyemak imbas menggunakan format pertama yang disokongnya (WebM/MP4 untuk lintas-penyemak imbas).
- **`poster`** — imej pemegang tempat sebelum bermain.
- **`preload`** — `none` / `metadata` / `auto`; gunakan `metadata` untuk mengelakkan memuat fail besar sehingga diperlukan.
- **`autoplay muted loop`** — untuk video latar (kebanyakan penyemak imbas **memerlukan `muted`** untuk membenarkan autoplay).
- **`<track>`** — keterangan/sarikata untuk kebolehaksesan (fail `.vtt`).

## Mengawal 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>` berfungsi secara sama, hanya tanpa bingkai visual/pemegang tempat.

## Mengapa Ia Penting

Elemen media asli memberikan pemain lintas-penyemak imbas, kebolehaksesan (sarikata melalui `<track>`), dan API JS lengkap untuk pemain tersuai.

Mengetahui corak format-fallback, peraturan `muted`-untuk-autoplay, dan `preload` untuk prestasi merangkumi esensi praktikal utama membenamkan media.