วิธีที่ง่ายที่สุดในการเล่นวิดีโอใน HTML คือการใช้ YouTube
ติดปัญหากับรูปแบบวิดีโอ?
การแปลงวิดีโอเป็นรูปแบบต่างๆ อาจทำได้ยากและใช้เวลานาน
วิธีแก้ไขที่ง่ายกว่าคือการให้ YouTube เล่นวิดีโอในหน้าเว็บของคุณ
YouTube Video Id
YouTube จะแสดง ID (เช่น tgbNymZ7vqY) เมื่อคุณบันทึก (หรือเล่น) วิดีโอ
คุณสามารถใช้ ID นี้และอ้างอิงถึงวิดีโอของคุณใน HTML code
เล่นวิดีโอ YouTube ใน HTML
หากต้องการเล่นวิดีโอของคุณบนหน้าเว็บ ให้ทำดังต่อไปนี้:
- อัปโหลดวิดีโอไปยัง YouTube
- จดบันทึกรหัสวิดีโอ
- กำหนด<iframe>องค์ประกอบในหน้าเว็บของคุณ
- ให้srcแอตทริบิวต์ชี้ไปที่ URL ของวิดีโอ
- ใช้ แอตทริบิวต์ widthและ heightเพื่อระบุขนาดของผู้เล่น
- เพิ่มพารามิเตอร์อื่นๆ ให้กับ URL (ดูด้านล่าง)
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/D-45GIp5Ejk">
</iframe>
</body>
</html>YouTube เล่นอัตโนมัติ + ปิดเสียง
คุณสามารถทำให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติเมื่อผู้ใช้เข้าชมเพจ โดยเพิ่มautoplay=1 ใน URL ของ YouTube อย่างไรก็ตาม การเริ่มวิดีโอโดยอัตโนมัติอาจเป็นสิ่งที่น่ารำคาญสำหรับผู้เยี่ยมชมเว็บไซต์ของคุณ
หมายเหตุ:เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่
อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ
เพิ่มmute=1หลัง autoplay=1เพื่อให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง)
ตัวอย่าง YouTube เล่นอัตโนมัติ ( ปิดเสียง )
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/D-45GIp5Ejk?autoplay=1&mute=1">
</iframe>
</body>
</html>
เพลย์ลิสต์ YouTube
รายการวิดีโอที่จะเล่นโดยคั่นด้วยเครื่องหมายจุลภาค (นอกเหนือจาก URL ดั้งเดิม)
YouTube Loop
เพิ่มloop=1เพื่อให้วิดีโอของคุณวนซ้ำตลอดไป
ค่า 0 (ค่าเริ่มต้น): วิดีโอจะเล่นเพียงครั้งเดียว
ค่า 1: วิดีโอจะเล่นวนซ้ำ (ตลอดไป)
ตัวอย่าง YouTube Loop
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/D-45GIp5Ejk?playlist=D-45GIp5Ejk&loop=1">
</iframe>
</body>
</html>
การควบคุมของ YouTube
เพิ่ม controls=0 เพื่อไม่ให้แสดงแผงการควบคุมในโปรแกรมเล่นวิดีโอ
ค่า 0: ตัวควบคุมด้านล่างสำหรับเลื่อนคลิปหรือเบาเสียงจะไม่แสดง
ค่า 1 (ค่าเริ่มต้น): ตัวควบคุมด้านล่างสำหรับเลื่อนคลิปหรือเบาเสียงจะแสดงปกติ
ตัวอย่าง YouTube Controls
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/D-45GIp5Ejk?controls=0">
</iframe>
</body>
</html>