HTML Video
แท็ก <video> ใน HTML ใช้สำหรับแสดงวิดีโอบนหน้าเว็บ
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
วิธีการทำงานของแท็ก <video>
- แอตทริบิวต์
controlsเพิ่มปุ่มควบคุมวิดีโอ เช่น เล่น (play), หยุดชั่วคราว (pause), และ ปรับระดับเสียง (volume) - แนะนำให้ใส่
widthและheightเสมอ เพื่อป้องกันการกระพริบของหน้าเว็บระหว่างโหลดวิดีโอ - แท็ก
<source>ใช้กำหนดไฟล์วิดีโอหลายรูปแบบ เพื่อให้เบราว์เซอร์เลือกเล่นได้ตามที่รองรับ - ข้อความที่อยู่ระหว่าง
<video>และ</video>จะแสดงเฉพาะในเบราว์เซอร์ที่ไม่รองรับแท็ก<video>
การเล่นอัตโนมัติ (Autoplay)
ใช้แอตทริบิวต์
autoplay เพื่อให้วิดีโอเริ่มเล่นอัตโนมัติเมื่อหน้าเว็บโหลด
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
เบราว์เซอร์ Chromium (เช่น Chrome, Edge) มักไม่อนุญาต autoplay แบบมีเสียง
แต่จะอนุญาตเสมอถ้าวิดีโอเป็นแบบ muted (ไม่มีเสียง)
เพิ่ม muted หลัง autoplay เพื่อให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
การรองรับของเบราว์เซอร์
| Element | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
รูปแบบวิดีโอที่ HTML รองรับ
HTML รองรับไฟล์วิดีโอ 3 รูปแบบหลัก คือ
MP4, WebM, และ Ogg
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | ✅ | ✅ | ✅ |
| Chrome | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ |
| Safari | ✅ | ✅ | ❌ |
| Opera | ✅ | ✅ | ✅ |
สกุลไฟล์วิดีโอ
| รูปแบบไฟล์ | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video DOM (Methods, Properties & Events)
แท็ก <video> มี เมธอด (Methods), พร็อพเพอร์ตี (Properties) และ อีเวนต์ (Events) ที่ใช้ควบคุมการเล่นวิดีโอผ่าน JavaScript คุณสามารถเล่น (play) / หยุด (pause) วิดีโอ ตั้งค่าความยาว (duration) ปรับระดับเสียง (volume) และตรวจจับเหตุการณ์ต่าง ๆ เช่น เมื่อวิดีโอเริ่มเล่นหรือหยุดชั่วคราว
ตัวอย่าง (ใช้ JavaScript):
<button onclick="playVid()">Play</button>
<button onclick="pauseVid()">Pause</button>
<video id="myVideo" width="320" height="240">
<source src="movie.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() { vid.play(); }
function pauseVid() { vid.pause(); }
</script>
แท็ก HTML Video
| แท็ก | คำอธิบาย |
|---|---|
<video> | ใช้สำหรับแสดงวิดีโอหรือภาพยนตร์บนเว็บเพจ |
<source> | ใช้ระบุไฟล์สื่อ (วิดีโอ/เสียง) หลายรูปแบบ |
<track> | ใช้เพิ่มคำบรรยาย (subtitles) หรือ ข้อความกำกับเสียง (captions) ลงในวิดีโอ |