วิธีใช้งาน tag VIDEO บน HTML5
ทำความรู้จักแท็กวีดีโอ <VIDEO>
ยังจำได้หรือไม่ว่า เวลาเราต้องการแทรกไฟล์วีดีโอบนเว็บไซต์ของเรา เราจะต้องมีการคำสั่งแท็ก <OBJECT> เพื่อให้เว็บบราวเซอร์ที่เราใช้ ดาวน์โหลดปลั๊กอินสำหรับการแสดงผลไฟล์วีดีโอขึ้นมาก่อน จากนั้นจึงใช้คำสั่ง <EMBED> เพื่อโหลดปลั๊กอินที่ติดตั้งมาทำงานร่วมกับบราวเซอร์ ซึ่งรหัสหรือโค๊ตที่ได้จะค่อนข้างยาว และดูเหมือนว่าคำสั่งมีการใช้ซ้ำไป ซ้ำมาอีกด้วย แต่ปัญหายังไม่หมด ถ้าเพราะนำคำสั่งนี้ไปใช้งานต่างบราวเซอร์ เราอาจจำเป็นต้องติดตั้ง ปลั๊กอิน สำหรับการไฟล์วีดีโอนั้นๆ เพิ่มเติมอีก
HTML5 กับคำสั่ง VIDEO
VIDEO เป็นแท็กใหม่ที่เริ่มใช้ HTML5 เป็นคำสั่งมาแทนที่แท็ก <OBJECT> <EMBED> โดยมีรูปแบบคำสั่ง คือ
- <VIDEO src = “XXXX” width = “XX” height = “XX” CONTROLS></VIDEO>
สำหรับจุดเด่นของ tag VIDEO นี้ก็คือ เราสามารถเล่นไฟล์วีดีโอได้ทันที โดยไม่จำเป้นต้องมีการโหลดปลั๊กอิน เหมือน HTML ก่อนหน้า HTML5 นี้ ซึ่งแน่นอนย่อมทำให้เกิดความสะดวกในการเขียนคำสั่ง รวมทั้งยังสามารถรองรับการใช้งานได้ทุกๆ บราวเซอร์อีกด้วย
นอกจากนี้ เรายังสามารถควบคุมการเล่นไฟล์วีดีโอ ด้วยการกำหนดคุณสมบัติเพิ่มเติมให้กับ tag VIDEO ได้อีกด้วย
คุณสมบัติต่างๆ ของแท็กวีดีโอ <VIDEO>
- autoplay – เล่นไฟล์อัตโนมัติ
- control – แสดงคำสั่งควบคุมการเลน
- width – กำหนดความกว้าง
- height – กำหนดความสูง
- loop – เล่นซ้ำ
- muted – ปิดเสียง
- poster – กำหนด URL ของภาพ กรณีที่ยังไม่เล่นไฟล์วีดีโอ
- src – กำหนด URL ของไฟล์ที่แสดง
ตัวอย่างการใช้คุณสมบัติของแท็กวีดีโอ <VIDEO>
- <VIDEO src = “MyVideo.mp4” width = “540” height = “280” CONTROLS MUTED></VIDEO>