ปกติแล้วเวลาเราจะเล่น วีดีโอในเว็บ เราก็จะเจอปัญหา คือต้องติดตั้ง ปลั๊กอินมากมาย ที่เราไม่ค่อยได้ใช้ แถมหนังเครื่อง ดีไม่ดี รก หน้า เดสท็อป แต่ก็เอาเหอะ ก็มันจะเป็นนี่ครับ ไม่อย่างนั้นมันก็เล่นไม่ได้ แต่พอผมมาลองทดสอบให้ HTML 5 ปัญหาพวกนี้หมดไปเลยครับ เพราะว่าสามารถเล่นได้โดยไม่ต้องอาศัยปลั๊กอินใดใด เสริม โดยเฉพาะ Flash player ลืมไปได้เลยครับ ไม่ต้องใช้ เพราะงั้นเราลองมาดูการใส่วีดีโอใน HTML 5 กันหน่อยดีกว่าครับ
ปกติแล้ว เราจะใช้ Tag <video> ครับ รูปแบบก็จะเป็นแบบนี้ครับ
<video src="movie.ogg" controls="controls">
</video>
แต่ปัญหาคือ เบราเซอร์หลายตัว ในปัจจุบัน ยังไม่ได้รองรับการใช้ HTML 5 เพราะงั้น เราก็จะใส่ ข้อความ ที่เราต้องงการให้แสดงเมื่อเบราเซอร์ไม่สามารถใช้งาน HTML5 ลงไปในแท็ก <video>|</video>
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
***กรณีนี้ ถ้าเบราเซอร์ไม่รองรับ HTML5 ก็จะแสดงข้อความ Your browser does not support the video tag. ขึ้นมาแทนอ่ะครับ
และในกรรีที่วีดีโอมาจากหลายแหลง หรือมาจากแหล่งอื่น รูปแบบการอ้างอิงไฟล์ก็จะใส่ไว้ใน Type แทนครับ
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
*** ในแอททริบิวต์ type จะเป็นโฟนเดอร์หรือที่เก็บ ไฟล์วีดีโอครับ แต่ทั้งนี้ในการแสดง เบราเซอร์จะแสดงไฟล์ที่รู้จัก ในครั้งแรก แต่การอ้างอิงแบบนี้จะเป็นประโยชน์มาก เพราะบางทีเบราเซอร์ที่ต่างกัน จะทำให้มีปัญหาเรื่องการแสดงไฟล์ แต่การอ้างอิงแบบนี้ ทำให้ปัญหาพวกน้นหมดไปครับ ***
สำหรับไฟล์ที่ใช้ใน HTML 5 ผมศึกษาดูรู้สึกว่าจะเห็นว่า น่าจะรองรับไฟล์อยู่ 2 ไฟล์ก็คือ
* Ogg = Ogg เป็นไฟล์ที่ มีตัวแปลงสัญญาณวิดีโอ Thedora และ Vorbis แปลงสัญญาณเสียง
* MPEG4 = MPEG 4 ไฟล์ ด้วยตัวแปลงสัญญาณวิดีโอ H.264 และ AAC แปลงสัญญาณเสียง
สำหรับ การรองรับไฟล์ ของเบราเวอร์ในตอนนี้ก็เป็นแบบในตารางนี้ครับ แต่ทั้งนี้ ผมยังไม่ขอพูดถึง IE9 และ Firefox 4.0 เพราะทั้ง 2 ตัว ยังเป็นเบต้า ยังไม่ออกเป็นเวอร์ชั่นเต็มเพราะงั้นก็คงเอาไว้ทีหลัง แต่ถ้าใครได้ลองใช้ จะเห็นว่า IE9 และ Firefox 4.0 จะรองรับ HTML 5 ได้สมบูรณ์ มาก
<video src="movie.ogg" controls="controls">
</video>
แต่ปัญหาคือ เบราเซอร์หลายตัว ในปัจจุบัน ยังไม่ได้รองรับการใช้ HTML 5 เพราะงั้น เราก็จะใส่ ข้อความ ที่เราต้องงการให้แสดงเมื่อเบราเซอร์ไม่สามารถใช้งาน HTML5 ลงไปในแท็ก <video>|</video>
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
***กรณีนี้ ถ้าเบราเซอร์ไม่รองรับ HTML5 ก็จะแสดงข้อความ Your browser does not support the video tag. ขึ้นมาแทนอ่ะครับ
และในกรรีที่วีดีโอมาจากหลายแหลง หรือมาจากแหล่งอื่น รูปแบบการอ้างอิงไฟล์ก็จะใส่ไว้ใน Type แทนครับ
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
*** ในแอททริบิวต์ type จะเป็นโฟนเดอร์หรือที่เก็บ ไฟล์วีดีโอครับ แต่ทั้งนี้ในการแสดง เบราเซอร์จะแสดงไฟล์ที่รู้จัก ในครั้งแรก แต่การอ้างอิงแบบนี้จะเป็นประโยชน์มาก เพราะบางทีเบราเซอร์ที่ต่างกัน จะทำให้มีปัญหาเรื่องการแสดงไฟล์ แต่การอ้างอิงแบบนี้ ทำให้ปัญหาพวกน้นหมดไปครับ ***
สำหรับไฟล์ที่ใช้ใน HTML 5 ผมศึกษาดูรู้สึกว่าจะเห็นว่า น่าจะรองรับไฟล์อยู่ 2 ไฟล์ก็คือ
* Ogg = Ogg เป็นไฟล์ที่ มีตัวแปลงสัญญาณวิดีโอ Thedora และ Vorbis แปลงสัญญาณเสียง
* MPEG4 = MPEG 4 ไฟล์ ด้วยตัวแปลงสัญญาณวิดีโอ H.264 และ AAC แปลงสัญญาณเสียง
สำหรับ การรองรับไฟล์ ของเบราเวอร์ในตอนนี้ก็เป็นแบบในตารางนี้ครับ แต่ทั้งนี้ ผมยังไม่ขอพูดถึง IE9 และ Firefox 4.0 เพราะทั้ง 2 ตัว ยังเป็นเบต้า ยังไม่ออกเป็นเวอร์ชั่นเต็มเพราะงั้นก็คงเอาไว้ทีหลัง แต่ถ้าใครได้ลองใช้ จะเห็นว่า IE9 และ Firefox 4.0 จะรองรับ HTML 5 ได้สมบูรณ์ มาก
Format | IE 8 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
---|---|---|---|---|---|
Ogg | No | Yes | Yes | Yes | No |
MPEG 4 | No | No | No | Yes | Yes |
ในส่วนของ Attibute ที่เราใช้กันใน HTML 5 จะมีดังนี้ครับ
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | กำหนดในวีดีโอเริ่มเล่นทันที |
controls | controls | กำหนดปุ่มควบคุม |
height | pixels | ความสูงของของวีดีโอที่แสดงครับ |
loop | loop | กำหนดจำนวนครั้งที่เล่น เช่น เล่น 3 ครั้งแล้วจึงหยุด |
preload | preload | กำหนดให้วีดีโอพร้อมใช้งานทันที เมื่อมีการโหลดหน้าเว็บ จะคล้าย ๆ กับ autoplay แต่รายละเอียดจะต่างกันพอสมควร |
src | url | ที่อยู่ของไฟล์วีดีโอ |
width | pixels | ความกว้างของวีดีโอที่แสดง |