วิธีที่ง่ายที่สุดในการเล่นวิดีโอในรูปแบบ HTML คือการใช้ YouTube
ดิ้นรนกับรูปแบบวิดีโอ?
รุ่นต่างๆของเบราว์เซอร์ที่แตกต่างกันสนับสนุนรูปแบบวิดีโอที่แตกต่างกัน
ก่อนหน้านี้ในการกวดวิชานี้คุณจะได้เห็นว่าคุณอาจจะต้องแปลงวิดีโอของคุณในรูปแบบวิดีโอที่แตกต่างกันจะทำให้พวกเขาเล่นในเบราว์เซอร์
แปลงวิดีโอไปยังรูปแบบที่แตกต่างกันอาจเป็นเรื่องยากและใช้เวลานาน
วิธีการแก้ปัญหาได้ง่ายขึ้นอาจจะมีการแจ้งให้ YouTube เล่นวิดีโอในหน้าเว็บของคุณ
Id วิดีโอ YouTube
YouTube จะแสดงรหัส (like XGSy3_Czz8k) เมื่อคุณบันทึก (or play) วิดีโอ
คุณสามารถใช้ ID นี้และดูวิดีโอของคุณในรูปแบบ HTML
การเล่นวิดีโอของ YouTube ใน HTML
ในการเล่นวิดีโอของคุณบนหน้าเว็บที่ทำต่อไปนี้:
- อัปโหลดวิดีโอไปยัง YouTube
- จดรหัสวิดีโอ
- กำหนด <iframe> องค์ประกอบในหน้าเว็บของคุณ
- ให้ src จุดแอตทริบิวต์ URL ของวิดีโอ
- ใช้ความกว้างและความสูงเพื่อระบุมิติของผู้เล่น
- เพิ่มพารามิเตอร์อื่น ๆ ไปยัง URL
ตัวอย่างเช่น - การใช้ iFrame (the recommended method)
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
ลองตัวเอง» พารามิเตอร์ YouTube
ซ่อนอัตโนมัติ
ราคา 0: การควบคุมผู้เล่นมักจะมองเห็นได้
ราคาที่ 1: การควบคุมผู้เล่นซ่อนโดยอัตโนมัติเมื่อเล่นวิดีโอ
ราคา 2 (default) : หากผู้เล่นที่มี 16: 9 หรือ 4: 3 อัตราส่วนเดียวกับ 1 มิฉะนั้นเดียวกับ 0
เล่นอัตโนมัติ
ราคา 0 (default) : วิดีโอจะไม่เล่นโดยอัตโนมัติเมื่อโหลดเล่น
ราคา 1: วิดีโอจะเล่นโดยอัตโนมัติเมื่อโหลดเล่น
การควบคุม
ราคา 0: การควบคุมผู้เล่นไม่แสดง วิดีโอโหลดได้ทันที
ราคา 1 (default) : ผู้เล่นควบคุมการแสดง วิดีโอโหลดได้ทันที
ราคา 2: ผู้เล่นควบคุมการแสดง แต่วิดีโอไม่ได้โหลดก่อนที่ผู้ใช้เริ่มต้นการเล่น
ห่วง
ราคา 0 (default) : วิดีโอจะเล่นเพียงครั้งเดียว
ราคา 1: วิดีโอจะห่วง (forever)
เพลย์ลิส
รายการที่คั่นด้วยเครื่องหมายจุลภาคของวิดีโอเพื่อเล่น (in addition to the original URL)
YouTube <object> ฝัง
YouTube <object> ฝังเลิกจากมกราคม 2015
คุณควรเปลี่ยนการใช้งานของคุณเพื่อใช้ <iframe> ฝัง
ตัวอย่างเช่น - การใช้ <object> (deprecated)
<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>
ลองตัวเอง» ตัวอย่างเช่น - การใช้ <embed> (deprecated)
<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
ลองตัวเอง»