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

หน้าแรก HTML5 html5 ทำความรู้จักแท็กวีดีโอ <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>

ขึ้นไปด้านบน