ใน HTML รุ่นก่อนๆ ไล่มาจนถึง HTML4 เราไม่สามารถแทรกวิดีโอและไฟล์เสียงลงไปในเว็บเพจได้แบบ native คือเป็นส่วนหนึ่งของหน้าเว็บ เฉกเช่นเดียวกับการแทรกภาพด้วยแท็ก เพราะตัวเทคโนโลยีเว็บและเบราว์เซอร์เอง ไม่สามารถประมวลผลวิดีโอ/เสียงได้เพียงลำพังของตัวมันเอง
อย่างไรก็ตาม เราก็มีทางออกโดยใช้แท็ก หรือ
<br>
<video src="movie.webm">video><br>
โปรแกรมภายนอกนี้คือ “ปลั๊กอิน” ที่ผู้ใช้ต้องติดตั้งเสริมลงไปในระบบปฏิบัติการ เคียงคู่ไปกับเบราว์เซอร์ ซึ่งปลั๊กอินที่เรารู้จักกันดีคือ Flash Player แต่ก็ยังมีตัวอื่นๆ อีกมาก เช่น Shockwave, Java, QuickTime, Silverlight, Google Earth, Google Video Chat เป็นต้น
ส่วนตัวอย่างการใช้งานก็มีตั้งแต่การเล่นภาพเคลื่อนไหว, วิดีโอ, เกม, ไปจนถึงวัตถุ 3 มิติอย่างใน Google Earth
แต่เมื่อเว็บพัฒนาขึ้น งานบางอย่างที่ต้องใช้ปลั๊กอินช่วยกลับได้รับความนิยมอย่างมาก โดยเฉพาะการเล่นวิดีโอ-ไฟล์เสียง ทำให้กลุ่มผู้ร่างมาตรฐานเว็บมองว่าควรจะกำหนดให้เบราว์เซอร์มีความสามารถนี้มาในตัวเลย
นี่เป็นเหตุให้ HTML5 มีแท็กใหม่ด้านนี้อีก 2 ตัวคือและ
หน้าที่การใช้งานก็ตามชื่อครับ
ตัวอย่างการใช้งาน
การฝังวิดีโอลงในหน้าเว็บ ใช้รูปแบบที่ใกล้เคียงกับการใส่แท็ก img มาก โดยรูปแบบที่เรียบงายที่สุดคือ
|
1
2
|
<br><video src="movie.webm">video><br> |
จะเห็นว่ารูปแบบการใช้แท็ก video จะเหมือนกับ img มาก คือเริ่มด้วยชื่อแท็กปกติ และตามด้วยคุณสมบัติ src เพื่อระบุตำแหน่งของไฟล์ที่จะแสดงผล (ส่วนวิธีใส่ path ก็เหมือนกันทุกประการ จะใส่ full path หรือ relative path ก็ตามชอบ)
สำหรับแท็ก audio ก็คล้ายๆ กัน ซึ่งคงจะไม่พูดถึงในที่นี้ครับ
แต่ในการใช้งานจริงๆ รูปแบบอาจจะซับซ้อนขึ้นมาสักนิด เพราะเราสามารถเลือกใส่ source ของไฟล์ได้หลายอันพร้อมกัน เพื่อให้เบราว์เซอร์เลือกใช้ไฟล์ที่เหมาะกับตัวเองมากที่สุด (ด้วยปัญหาเรื่อง codec ดังจะกล่าวถึงในหัวข้อต่อไป)
ตัวอย่างจากเว็บ HTML5 Rocks
|
1
2
3
4
5
|
<br><video><br> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /><br>video><br> |
นอกจากนี้เรายังสามารถใส่ข้อความเพื่อให้แสดงผลเมื่อเบราว์เซอร์ไม่รู้จักแท็กนี้ได้ด้วย วิธีการคือยัดข้อความลงไปต
|
1
2
3
4
5
6
|
<br><video><br> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /><br> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br> Video tag not supported. Download the video <a href="movie.webm">herea>.<br>video><br> |
ในโลกยุคปัจจุบัน ยังมีเบราว์เซอร์อีกไม่น้อยที่ไม่รองรับ HTML5 Video (ตัวอย่าง IE7/8) ทำให้ในการใช้งานจริง เราควรจะใส่ Flash Object ไว้เป็นทางเลือก (ถ้ามี) ให้ด้วย วิธีการก็แบบเดียวกัน
|
1
2
3
4
5
6
|
<br><video><br> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /><br> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br> <object type="application/x-shockwave-flash"> ... object><br>video><br> |
ความสามารถอื่นๆ ของแท็ก video ที่อยู่ในรูป attribute
- controls – สามารถกำหนดได้ว่าจะแสดง “ตัวควบคุมการเล่น” (control) ไว้ด้วยหรือไม่ (ซึ่งเป็นตัวคุมวิดีโอขั้นพื้นฐานที่มากับตัวเบราว์เซอร์)
- poster – แสดงภาพ thumbnail ของวิดีโอสำหรับก่อนกด play ได้ด้วย อันนี้เราต้องเตรียมภาพมาเองเป็นไฟล์ภาพธรรมดา ปรับขนาดมาให้ตรง
- autoplay – เล่นอัตโนมัติ
- loop – เล่นวนซ้ำ