ทำความรู้จักแท็กวีดีโอ <VIDEO>

ยังจำได้หรือไม่ว่า เวลาเราต้องการแทรกไฟล์วีดีโอบนเว็บไซต์ของเรา เราจะต้องมีการคำสั่งแท็ก <OBJECT> เพื่อให้เว็บบราวเซอร์ที่เราใช้ ดาวน์โหลดปลั๊กอินสำหรับการแสดงผลไฟล์วีดีโอขึ้นมาก่อน จากนั้นจึงใช้คำสั่ง <EMBED> เพื่อโหลดปลั๊กอินที่ติดตั้งมาทำงานร่วมกับบราวเซอร์ ซึ่งรหัสหรือโค๊ตที่ได้จะค่อนข้างยาว และดูเหมือนว่าคำสั่งมีการใช้ซ้ำไป ซ้ำมาอีกด้วย แต่ปัญหายังไม่หมด ถ้าเพราะนำคำสั่งนี้ไปใช้งานต่างบราวเซอร์ เราอาจจำเป็นต้องติดตั้ง ปลั๊กอิน สำหรับการไฟล์วีดีโอนั้นๆ เพิ่มเติมอีก

ตัวอย่างคำสั่ง <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>