วิดีโอ HTML

องค์ประกอบ HTML <video>ใช้เพื่อแสดงวิดีโอบนหน้าเว็บ

ตัวอย่าง

ได้รับความอนุเคราะห์จากBig Buck Bunny :

HTML <วิดีโอ> องค์ประกอบ

หากต้องการแสดงวิดีโอใน HTML ให้ใช้<video>องค์ประกอบ:

ตัวอย่าง

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

มันทำงานอย่างไร

แอตทริบิวต์controlsเพิ่มการควบคุมวิดีโอ เช่น เล่น หยุดชั่วคราว และปรับระดับเสียง

เป็นความคิดที่ดีที่จะรวมwidthและheightแอตทริบิวต์เสมอ หากไม่ได้ตั้งค่าความสูงและความกว้าง หน้าอาจกะพริบขณะโหลดวิดีโอ

องค์ประกอบ<source>ช่วยให้คุณระบุไฟล์วิดีโอทางเลือกที่เบราว์เซอร์อาจเลือก เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก

ข้อความระหว่าง แท็ก <video>และ</video>จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน<video>องค์ประกอบเท่านั้น

HTML <วิดีโอ> เล่นอัตโนมัติ

ในการเริ่มวิดีโอโดยอัตโนมัติ ให้ใช้autoplayแอตทริบิวต์:

ตัวอย่าง

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

หมายเหตุ:เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงเสมอ

เพิ่มmutedหลังautoplayเพื่อให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):

ตัวอย่าง

<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุน <video>องค์ประกอบอย่างสมบูรณ์

Element
<video>	4.0	9.0	3.5	4.0	10.5

รูปแบบวิดีโอ HTML

มีรูปแบบวิดีโอที่รองรับสามรูปแบบ: MP4, WebM และ Ogg เบราว์เซอร์ที่รองรับรูปแบบต่าง ๆ คือ:

Browser	MP4	WebM	Ogg
Edge	YES	YES	YES
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES