HTML
Media
Video (video)
บทนี้สอนผู้เริ่มต้นให้ฝังวิดีโอด้วยแท็ก `video` อย่างเข้าใจ ใช้ `controls`, `autoplay`, `loop`, `muted`, `poster` และ `<source>` ได้อย่างเหมาะสม พร้อมคุมขนาดวิดีโอให้พอดีกับ layout ของหน้าเว็บและตรวจผ่าน Playground ได้จริง
1. หัวข้อนี้คืออะไร
`video` คือแท็ก HTML สำหรับฝังวิดีโอลงในหน้าเว็บโดยตรง แทนที่จะให้ผู้ใช้กดลิงก์ออกไปเปิดไฟล์แยก เราสามารถแสดงตัวเล่นวิดีโอไว้ในหน้าเดียวกัน ทำให้ดูเนื้อหาได้ทันทีและควบคุมการเล่นได้สะดวกกว่า
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้ใช้ดูวิดีโอได้ทันทีโดยไม่ต้องออกจากหน้าเว็บ
- เหมาะกับบทเรียน เดโมสินค้า คลิป how-to หรือคำอธิบายสั้น ๆ บนหน้าเดียวกัน
- ควบคุมประสบการณ์ผู้ใช้ได้ด้วย attributes เช่น `controls`, `loop`, `muted`, `poster`
- ช่วยให้เราออกแบบหน้าเว็บได้สมดุลขึ้น เพราะสามารถกำหนดขนาดวิดีโอให้ไม่ดัน layout เกินจำเป็น
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - หน้าเรียนออนไลน์ที่มีวิดีโออธิบายบทเรียน - หน้าแนะนำสินค้า ที่มีคลิปเดโมการใช้งาน - บทความ how-to ที่มีวิดีโอสาธิตขั้นตอน - หน้าโปรโมตฟีเจอร์ที่ใช้คลิปสั้นช่วยสื่อสาร ทุกกรณีนี้ใช้ `video` เพื่อให้ผู้ใช้เข้าใจเนื้อหาได้เร็วขึ้นจากหน้าเว็บเดียว
4. แนวคิดหลักที่ต้องเข้าใจ
- `<video>` ใช้ฝังวิดีโอในหน้าเว็บ ไม่ใช่แค่ลิงก์ไปยังไฟล์วิดีโอ
- โดยทั่วไปควรใส่ `controls` เพื่อให้ผู้ใช้กดเล่น หยุด หรือเลื่อนเวลาเองได้
- `autoplay` คือให้วิดีโอเริ่มเล่นอัตโนมัติ แต่หลายเบราว์เซอร์มีข้อจำกัดและอาจกระทบประสบการณ์ผู้ใช้
- `loop` คือเล่นซ้ำอัตโนมัติเมื่อวิดีโอจบ
- `muted` คือเริ่มต้นแบบปิดเสียง และมักใช้ร่วมกับ `autoplay` เมื่อจำเป็น
- `poster` คือภาพที่แสดงก่อนเริ่มเล่นวิดีโอ ช่วยให้พื้นที่ดูเรียบร้อยก่อนผู้ใช้กดเล่น
- `<source>` ใช้ระบุไฟล์วิดีโอที่แท็ก `video` จะพยายามเล่น
- วิดีโอควรมีขนาดพอดีกับ container และมักใช้ CSS เช่น `max-width: 100%` กับ `height: auto` เพื่อไม่ให้ล้นกรอบ
5. การทำงานทีละขั้นตอน
- 1) วางแท็ก `<video>` ในตำแหน่งที่ต้องการแสดงวิดีโอ
- 2) เพิ่ม `controls` เพื่อให้ผู้ใช้ควบคุมการเล่นเองได้
- 3) ใส่ `<source src="..." type="video/webm">` หรือชนิดไฟล์ที่เหมาะกับวิดีโอของคุณ
- 4) เพิ่ม `poster` หากต้องการภาพปกก่อนเริ่มเล่น
- 5) ใส่ข้อความ fallback ภายใน `<video>` เผื่อกรณีเบราว์เซอร์ไม่รองรับ
- 6) ถ้าต้องการคุมขนาดให้ใช้ CSS พื้นฐาน เช่น `max-width: 100%;` และ `height: auto;` เพื่อให้วิดีโอพอดีกับหน้า
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้ใช้ `video` พร้อม `controls`, `poster`, `<source>` และ CSS พื้นฐานเพื่อไม่ให้วิดีโอล้น container โดยในเดโมนี้เลือกใช้ไฟล์ `video/webm` จาก Wikimedia Commons เพื่อให้โหลดตัวอย่างได้ตรงกับแหล่งสื่อที่ใช้จริง
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่าใส่ `autoplay` แล้ววิดีโอจะเล่นอัตโนมัติทุกครั้ง ทั้งที่บางเบราว์เซอร์จำกัดไว้
- ลืมใส่ `controls` แล้วผู้ใช้ไม่รู้จะกดเล่นจากตรงไหน
- ใส่ `<video>` แต่ลืม `<source>` ทำให้ไม่มีไฟล์ให้เล่นจริง
- เข้าใจว่า `poster` คือไฟล์วิดีโออีกตัว ทั้งที่จริงมันคือภาพปกก่อนเริ่มเล่น
- กำหนด `width` หรือ CSS จนวิดีโอใหญ่เกิน container และดัน layout ให้เสียสมดุล
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `video` vs ลิงก์ไฟล์วิดีโอ (`a`) | video ฝังตัวเล่นวิดีโอในหน้า ส่วนลิงก์พาผู้ใช้ไปเปิดไฟล์หรือดาวน์โหลด | ถ้าต้องการให้ดูวิดีโอได้ทันทีในหน้า ใช้ video |
| มี `controls` vs ไม่มี `controls` | มี controls ผู้ใช้ควบคุมการเล่นเองได้ ส่วนไม่มี controls จะใช้งานยากกว่า | โดยทั่วไปควรมี controls ยกเว้นมี UI ควบคุมแบบพิเศษเอง |
| `poster` vs เฟรมแรกของวิดีโอ | poster คือภาพที่เรากำหนดเองก่อนเล่น ส่วนเฟรมแรกขึ้นอยู่กับตัววิดีโอ | ใช้ poster เมื่ออยากควบคุมภาพก่อนเล่นให้ดูชัดและสวยงาม |
| `autoplay` vs ให้ผู้ใช้กดเล่นเอง | autoplay อาจรบกวนผู้ใช้และถูกจำกัดโดย browser ส่วนให้ผู้ใช้กดเล่นเองควบคุมได้ชัดกว่า | เริ่มต้นควรให้ผู้ใช้กดเล่นเอง เว้นแต่มีเหตุผล UX ที่ชัดเจนมาก |
9. สรุปท้ายบทแบบจำง่าย
- `video` คือแท็กสำหรับฝังวิดีโอในหน้าเว็บ
- โดยทั่วไปควรใช้ `controls` เพื่อให้ผู้ใช้ควบคุมการเล่นได้
- `<source>` คือแหล่งไฟล์วิดีโอที่แท็ก `video` จะพยายามเล่น
- `poster` ช่วยให้พื้นที่วิดีโอดูเรียบร้อยก่อนเริ่มเล่น
- `autoplay` ควรใช้ด้วยความระมัดระวัง เพราะอาจถูกรบกวน UX และบางเบราว์เซอร์จำกัด
- คุมขนาดวิดีโอให้พอดีกับ container ด้วย CSS พื้นฐาน เช่น `max-width: 100%`
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้ฝังวิดีโอได้ถูกต้อง อ่านง่าย และไม่ทำให้ layout ของหน้าเว็บเสียสมดุล
Lab 1 (พื้นฐาน): เพิ่ม video พร้อม controls
ชื่อ Lab: ฝังวิดีโอครั้งแรก เป้าหมาย: เพิ่ม video player ที่ผู้ใช้ควบคุมได้ โจทย์: ในพื้นที่ที่กำหนด ให้เพิ่ม <video id="intro-video" controls> พร้อม <source src="https://commons.wikimedia.org/wiki/Special:FilePath/Sample_file.webm" type="video/webm"> 1 แหล่ง เงื่อนไข: ต้องมี video พร้อม controls และมี source อย่างน้อย 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: เริ่มจากโครง video -> ใส่ controls -> ใส่ source
Lab 2 (กลาง): ใช้ poster หรือ muted/loop ตามโจทย์
ชื่อ Lab: ปรับพฤติกรรมและภาพก่อนเล่น เป้าหมาย: ใช้ attributes พื้นฐานของ video ให้ครบตามโจทย์ โจทย์: สร้าง <video id="promo-video" controls muted loop poster="https://commons.wikimedia.org/wiki/Special:FilePath/Wikimedia-logo_black.svg"> พร้อม source วิดีโอ 1 ตัว เงื่อนไข: ต้องมี controls, muted, loop และ poster ครบ พร้อม source ภายใน สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ตั้ง attributes ที่แท็ก video ก่อน แล้วเติม source และข้อความ fallback
Lab 3 (ท้าทาย): แก้วิดีโอที่ล้น container หรือใส่ attribute ไม่เหมาะ
ชื่อ Lab: ซ่อม video ให้พอดีหน้าและใช้งานเหมาะสม เป้าหมาย: แก้โค้ด video ที่ล้น container และตั้งค่าไม่เหมาะกับผู้ใช้ โจทย์: จากโค้ดตั้งต้น ให้แก้ <video id="feature-video" autoplay> ให้อยู่ใน container เดิม เพิ่ม controls, ใส่ source และ poster แล้วทำให้วิดีโอไม่ล้นกรอบด้วย CSS พื้นฐาน เงื่อนไข: ต้องคง id เดิมเป็น feature-video, ต้องไม่ปล่อยให้ video เล่นแบบ autoplay ที่ไม่มี muted และต้องคุมขนาดให้พอดีกับ container สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ตรวจ 4 จุดหลักคือ controls, source, poster และ CSS ที่ช่วยให้ video ไม่ล้น container