ฝังวิดีโอ HTML:คำแนะนำทีละขั้นตอน

คุณสามารถฝังวิดีโอในเอกสาร HTML โดยใช้ฟังก์ชันเหล่านี้: <video> , <object> และ <embed> . แต่ละคนทำงานแตกต่างกัน และแต่ละคนใช้ src แอตทริบิวต์ที่จะชี้ไปที่ URL ของวิดีโอที่ต้องการ

เมื่อคุณสร้างหน้าเว็บ คุณอาจตัดสินใจว่าคุณต้องการฝังวิดีโอในเอกสาร ตัวอย่างเช่น คุณอาจกำลังเขียนบทแนะนำเกี่ยวกับวิธีการอบเค้กและใส่วิดีโอควบคู่ไปกับสูตรอาหาร

มีสองวิธีในการฝังวิดีโอในเอกสาร HTML ในคู่มือนี้ เราจะพูดถึงสามวิธีในการฝังวิดีโอโดยใช้ HTML . เหล่านี้ ฟังก์ชัน:ใช้ <video> , โดยใช้ <object> และใช้ <embed> .

แท็กวิดีโอ

HTML5 รวมองค์ประกอบที่เป็นประโยชน์สำหรับการฝังวิดีโอในหน้าเว็บ:<video> . แม้ว่าองค์ประกอบจะไม่ทำงานในเว็บเบราว์เซอร์สมัยใหม่ทั้งหมด แต่ก็ยังค่อนข้างใหม่ แท็กจะใช้งานได้ในเบราว์เซอร์ส่วนใหญ่

องค์ประกอบวิดีโอประกอบด้วยสองพารามิเตอร์:แหล่งที่มาของวิดีโอและการควบคุมที่คุณต้องการใช้ นี่คือรูปแบบการฝังวิดีโอ HTML <video> แท็ก:

<video controls="controls" src="videos/ourVideo.mp4">
	This browser does not support the video element.
</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">
	This browser does not support the video element.
</video>

ตอนนี้เราได้แทรกวิดีโอบนหน้าเว็บของเราโดยใช้องค์ประกอบแหล่งที่มาของเรา ด้านบน เราได้อ้างอิงถึงทรัพยากร mp4 และ mp3 แต่คุณสามารถใช้รูปแบบวิดีโอมาตรฐานใดก็ได้ใน <video> แท็ก.

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ฝังแท็ก

นอกจากนี้ คุณสามารถใช้ <embed> เพื่อฝังวิดีโอและมัลติมีเดียอื่นๆ ลงใน HTML หน้าเว็บ. นี่คือตัวอย่าง <embed> แท็กที่ใช้อ้างอิงวิดีโอ Adobe Flash บนหน้าเว็บ:

<embed src="videos/ourVideo.swf" width="600px" height="400px">

รหัสนี้แสดงวิดีโอ Flash บนหน้าเว็บ เรายังใช้ width และ height พารามิเตอร์เพื่อระบุขนาดของโปรแกรมเล่นวิดีโอของเรา ในกรณีนี้ โปรแกรมเล่นวิดีโอของเราจะแสดงผลในขนาด 600×400

อย่างไรก็ตาม หากคุณกำลังอ้างอิงทรัพยากร Flash วิดีโอของคุณอาจไม่เล่น เนื่องจากผู้ใช้ต้องติดตั้ง Flash และใช้งานอยู่บนระบบของตน และผู้ใช้จำนวนมากไม่ได้ติดตั้ง

แท็กออบเจ็กต์

เรายังสามารถใช้ <object> เพื่อฝังสื่อประเภทต่างๆ ลงใน HTML หน้าเว็บ. ตัวอย่างเช่น คุณสามารถใช้แท็กนี้เพื่อฝัง HTML5 วิดีโอ เสียง ทรัพยากร Flash หรือไฟล์ PDF ลงในหน้าเว็บของคุณ นี่คือตัวอย่าง <object> องค์ประกอบที่ใช้ในการฝังวิดีโอลงในหน้าเว็บ:

<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>

อีกครั้ง ผู้ใช้ต้องติดตั้ง Flash และเปิดใช้งานสำหรับ <object> แท็กในการทำงาน แม้ว่าคุณยังต้องการใช้ <object> ให้พิจารณาใช้ <video> องค์ประกอบหรือทั้งสองอย่างสำหรับผู้ใช้ที่ไม่ได้ติดตั้ง Flash

บทสรุป

HTML ประกอบด้วยสามองค์ประกอบที่ช่วยให้คุณสามารถฝังไฟล์วิดีโอลงในหน้าเว็บ:<video> , <object> และ <embed> . ดังนั้น หากคุณต้องการเพิ่มวิดีโอลงในหน้าเว็บ คุณควรใช้แท็กเหล่านี้ วันนี้ เราได้พูดถึงการใช้แท็กเหล่านี้และความเข้ากันได้กับเบราว์เซอร์และ Flash

ตอนนี้คุณมีความรู้ที่จำเป็นในการฝังวิดีโอบนหน้าเว็บแล้ว!