องค์ประกอบเสียงและวิดีโอทำงานอย่างไร

Question

Accepted Answer

`<audio>` และ `<video>` ฝังสื่อโดยกำเนิด พร้อมตัวควบคุมในตัวและ API ของ JavaScript — ไม่จำเป็นต้องมีปลั๊กอิน

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

## แอตทริบิวต์หลัก

- **`controls`** — โดยไม่มี UI จะไม่ปรากฏขึ้น (คุณจะควบคุมผ่าน JS).
- **`<source>` หลายรายการ** — เบราว์เซอร์ใช้รูปแบบแรกที่รองรับ (WebM/MP4 สำหรับข้ามเบราว์เซอร์).
- **`poster`** — ภาพยึดตำแหน่งก่อนเล่น
- **`preload`** — `none` / `metadata` / `auto`; ใช้ `metadata` เพื่อหลีกเลี่ยงการดาวน์โหลดไฟล์ขนาดใหญ่จนกว่าจะต้องใช้
- **`autoplay muted loop`** — สำหรับวิดีโอพื้นหลัง (เบราว์เซอร์ส่วนใหญ่ **ต้องการ `muted`** เพื่ออนุญาตการเล่นอัตโนมัติ).
- **`<track>`** — คำบรรยาย/ซับไตเติล เพื่อการเข้าถึง (ไฟล์ `.vtt`).

## ควบคุมด้วย 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>` ทำงานเหมือนกัน เพียงแต่ไม่มีเฟรมภาพ/โปสเตอร์

## เหตุที่สำคัญ

องค์ประกอบสื่อดั้งเดิมให้การเล่นข้ามเบราว์เซอร์ ความเข้าถึง (คำบรรยายผ่าน `<track>`), และ API จาวาสคริปต์แบบเต็มสำหรับเครื่องเล่นที่กำหนดเอง

การรู้รูปแบบ fallback รูปแบบ กฎ `muted`-สำหรับ-autoplay และ `preload` สำหรับประสิทธิภาพ ครอบคลุมสิ่งจำเป็นของการฝังสื่อในทางปฏิบัติ