Các element audio và video hoạt động như thế nào?

Question

Accepted Answer

`<audio>` và `<video>` nhúng media một cách native, với các điều khiển tích hợp sẵn và một JavaScript API — không cần 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>
```

## Các attribute then chốt

- **`controls`** — nếu không có nó, không có UI nào xuất hiện (bạn sẽ điều khiển qua JS).
- **nhiều `<source>`** — trình duyệt dùng định dạng đầu tiên nó hỗ trợ (WebM/MP4 để tương thích đa trình duyệt).
- **`poster`** — hình ảnh thay thế trước khi phát.
- **`preload`** — `none` / `metadata` / `auto`; dùng `metadata` để tránh tải các file lớn cho tới khi cần.
- **`autoplay muted loop`** — cho video nền (đa số trình duyệt **yêu cầu `muted`** để cho phép autoplay).
- **`<track>`** — phụ đề cho accessibility (một file `.vtt`).

## Điều khiển bằng JavaScript

```js
const v = document.querySelector("video");
v.play();           // trả về một promise (có thể bị từ chối nếu autoplay bị chặn)
v.pause();
v.currentTime = 30; // tua tới giây thứ 30
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
```

`<audio>` hoạt động giống hệt, chỉ là không có khung hình/poster.

## Tại sao điều này quan trọng

Các media element native cho bạn khả năng phát đa trình duyệt, accessibility (phụ đề qua `<track>`), và một JS API đầy đủ cho các player tùy chỉnh.

Nắm được pattern fallback định dạng, quy tắc `muted`-để-autoplay, và `preload` cho hiệu năng bao quát những thiết yếu thực tế của việc nhúng media.