คุณสามารถฝังวิดีโอในเอกสาร HTML ได้โดยใช้ฟังก์ชัน 3 แบบ ได้แก่ <video>, <object>, และ <embed> แต่ละตัวทำงานต่างกัน และทุกตัวใช้แอตทริบิวต์ src เพื่อระบุ URL ของวิดีโอที่ต้องการ
เมื่อสร้างหน้าเว็บ คุณอาจต้องการฝังวิดีโอลงในเอกสาร เช่น การเขียนบทแนะนำทำเค้กพร้อมวิดีโอประกอบสูตรอาหาร
มีหลายวิธีในการฝังวิดีโอใน HTML บทความนี้จะครอบคลุม 3 วิธีหลัก ได้แก่ การใช้ <video>, <object>, และ <embed>
แท็ก Video
HTML5 มีเอลิเมนต์ที่มีประโยชน์สำหรับฝังวิดีโอในหน้าเว็บคือ <video> แม้จะไม่รองรับในทุกเบราว์เซอร์สมัยใหม่ (เพราะยังใหม่ค่อนข้างมาก) แต่แท็กนี้ทำงานในส่วนใหญ่ของเบราว์เซอร์
เอลิเมนต์ video รับพารามิเตอร์ 2 ค่า ได้แก่ แหล่งที่มาของวิดีโอและคอนโทรลที่ต้องการใช้ สินทักซ์สำหรับแท็ก <video> คือ:
<video controls="controls" src="videos/ourVideo.mp4"> เบราว์เซอร์นี้ไม่รองรับเอลิเมนต์วิดีโอ </video>
ในตัวอย่าง ใช้แอตทริบิวต์ src อ้างอิงวิดีโอที่ videos/ourVideo.mp4 และใช้ controls เพื่อแสดงคอนโทรลเริ่มต้นของเบราว์เซอร์ ข้อความภายในแท็ก <video> จะแสดงเมื่อวิดีโอเล่นไม่ได้
หากต้องการแหล่งที่มาสำรอง สามารถใช้โค้ดดังนี้:
<video controls="controls"> <source src="videos/ourVideo.mp4" type="video/mp4"> <source src="videos/ourSecondVideo.mp3" type="video/mp3"> เบราว์เซอร์นี้ไม่รองรับเอลิเมนต์วิดีโอ </video>
ตอนนี้เราได้ฝังวิดีโอในเว็บเพจแล้ว โดยอ้างอิงทั้ง mp4 และ mp3 แต่คุณสามารถใช้รูปแบบวิดีโอมาตรฐานใดก็ได้ในแท็ก <video>
แท็ก Embed
นอกจากนี้ยังสามารถใช้เอลิเมนต์ <embed> เพื่อฝังวิดีโอและมัลติมีเดียอื่นๆ ลงในหน้าเว็บ HTML ตัวอย่างการใช้ <embed> อ้างอิงวิดีโอ Adobe Flash:
<embed src="videos/ourVideo.swf" width="600px" height="400px">
โค้ดนี้จะแสดงวิดีโอ Flash บนหน้าเว็บ ใช้ width และ height กำหนดขนาดผู้เล่นวิดีโอ (600×400)
อย่างไรก็ตาม หากอ้างอิงทรัพยากร Flash วิดีโออาจเล่นไม่ได้ เนื่องจากผู้ใช้ต้องติดตั้งและเปิดใช้งาน Flash บนระบบ ซึ่งผู้ใช้หลายคนไม่ได้ทำ
แท็ก Object
เรายังสามารถใช้แท็ก <object> เพื่อฝังสื่อประเภทต่างๆ เช่น วิดีโอ HTML5, เสียง, Flash, หรือไฟล์ PDF ตัวอย่างการใช้ <object> ฝังวิดีโอ:
<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>
เช่นเดียวกัน ผู้ใช้ต้องมี Flash ติดตั้งและเปิดใช้งานสำหรับแท็ก <object> แม้คุณยังต้องการใช้ <object> ควรพิจารณาใช้ <video> ร่วมด้วยสำหรับผู้ที่ไม่มี Flash
สรุป
HTML มี 3 เอลิเมนต์สำหรับฝังไฟล์วิดีโอ: <video>, <object>, และ <embed> หากต้องการเพิ่มวิดีโอในหน้าเว็บ ควรใช้แท็กเหล่านี้ บทความนี้อธิบายการใช้งานและความเข้ากันได้กับเบราว์เซอร์และ Flash
ตอนนี้คุณพร้อมที่จะฝังวิดีโอในหน้าเว็บใดๆ แล้ว!
