บทที่ 6 HTML5 video
การใส่วีดีโอในเว็บไซต์ที่สร้างจากภาษา HTML5 นั้น ไม่จำเป็นต้องพึ่ง Adobe Flash และ plugin ใดๆ เพราะใน HTML5 สามารถใช้แท็ก <video> ได้ และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย
ตอนนี้ web browserจะใช้ได้กับวีดีโออยู่ video 3 format ดังข้อมูลในตารางด้านล่าง ซึ่งในแต่ละ web browser จะรองรับ Video Format ไม่เหมือนกัน
| Browser | MP4 | WebM | Ogg |
| Internet Explorer 9 | สนับสนุน | ไม่สนับสนุน | ไม่สนับสนุน |
| Firefox 4.0 | ไม่สนับสนุน | สนับสนุน | สนับสนุน |
| Google Chrome 6 | สนับสนุน | สนับสนุน | สนับสนุน |
| Apple Safari 5 | สนับสนุน | ไม่สนับสนุน | ไม่สนับสนุน |
| Opera 10.6 | ไม่สนับสนุน | สนับสนุน | สนับสนุน |
โครงสร้างแท็ก ในการใส่วีดีโอ
<video width="320" height="240" controls="controls">
<source src="/movie.ogg" type="video/ogg" />
<source src="/movie.mp4" type="video/mp4" />
<source src="/movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>โดยแต่ละ Attribute จาก HTML ด้านบน มีความหมายดังนี้
1.control คือปุ่ม control การเล่นวิดีโอ เช่น ปุ่ม play, pause ฯลฯ
2.ข้อความ ?Your browser does not support the video tag.? จะแสดงผลในกรณีที่ Browser ของ user ไม่ support <video> (ตอนนี้ Browser หลายๆ Browser ยังไม่ support Element นี้) เพราะฉะนั้น ถ้า Browser ไหนไม่ support มันก็จะไม่เห็นเป็นไฟล์วิดีโอ แต่ขึ้นข้อความบอกให้ user รู้แทน ว่า browser ของคุณไม่ support นะ
3.จาก HTML ด้านบน จะเห็นว่ามีการเรียก Video format มาตั้ง 3 format เนื่องจากต้องการให้ครอบคลุมทุกๆ browser เพราะแต่ละบราวเซอร์จะ support video format ไม่เหมือนกัน (ดังข้อมูลในตาราง) ดังนั้น ถ้าอยากจะให้มัน support ทั้งหมด ก็ใส่มันเรียงเข้าไปเลย บราวเซอร์ไหน support อะไรก็จะทำการดึงขึ้นมาแสดงเอง
ตัวอย่าง
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">Your browser does not support the video tag.
</video>
</body>
</html>ผลลัพธ์คือ
นอกจากนี้ ยังมี attribute อีกหลายๆตัว เพื่อเพิ่มลูกเล่น และความสะดวกสบายให้กับ Element นี้ด้วย ดังตาราง
| Attribute | ค่าที่สามารถเรียกใช้งานได้ | คำอธิบาย |
| autoplay | autoplay | สั่งให้มันเล่นเลยรึเปล่า เมื่อโหลดเพจเสร็จ ถ้าสั่งเป็น autoplay ก็คือ หลังจากโหลดหน้าเว็บขึ้นมาเสร็จแล้ว มันก็จะเล่นไฟล์วิดีโอเองเลย แต่ถ้าไม่สั่ง user ต้องคลิกปุ่ม ?Play? ถึงจะเล่น |
| controls | controls | ถ้าสั่ง attribute นี้ จะมีแผงปุ่มต่างๆเพื่อควบคุมการเล่นไฟล์วิดีโอขึ้นมาให้กด |
| height | pixels | กำหนดความสูงของวิดีโอ (ควรใส่ทุกครั้ง) |
| loop | loop | กำหนดให้ไฟล์วิดีโอเล่นอีกครั้ง หลังมันเล่นจบ แล้วจะวนไปเรื่อยๆ |
| poster | url | ใส่รูป เหมือนเป็น video preview ก่อนที่มันจะเล่นไฟล์วิดีโอ |
| src | url | URL ของไฟล์วิดีโอ |
| width | pixels | กำหนดความกว้างให้ video (ควรใส่ทุกครั้ง) |
