วีดีโอ HTML
- หน้าก่อนหน้า แสงเสียง HTML
- หน้าต่อไป HTML YouTube
มีหลายวิธีที่สามารถเล่นวิดีโอใน HTML
ตัวอย่าง
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
ปัญหา ปัญหา และวิธีแก้ปัญหา
มันไม่ง่ายที่จะเล่นวิดีโอใน HTML
คุณต้องเข้าใจทั้งหมดทั้งที่คุณต้องใช้ทั้งหมดทั้งความสามารถที่คุณต้องใช้เพื่อให้แบบแบตทิ้งวิดีโอของคุณเล่นได้ในบราวเซอร์ทั้งหมด (Internet Explorer, Chrome, Firefox, Safari, Opera) และทั้งหมดของฮาร์ดแวร์ (PC, Mac, iPad, iPhone)
ในบทนี้ CodeW3C.com ได้รวบรวมปัญหาและวิธีแก้ปัญหาให้คุณ
ใช้แบบแบตทิ้ง <embed>
แบบแบตทิ้ง <embed> มีความหมายคือฝังส่วนมีเมลายาแบบมั่นใจในหน้าเว็บ HTML
รหัส HTML ต่อไปนี้แสดงวิดีโอ Flash ที่ฝังในหน้าเว็บ
ตัวอย่าง
<embed src="movie.swf" height="200" width="200"/>
ปัญหา
- HTML4 ไม่สามารถรับรู้แบบแบตทิ้ง <embed> ได้ หน้าเว็บของคุณจะไม่ผ่านการตรวจสอบ
- หากบราวเซอร์ไม่สนับสนุน Flash วิดีโอจะไม่สามารถเล่นได้
- iPad และ iPhone ไม่สามารถแสดงวิดีโอ Flash
- หากคุณเปลี่ยนแบบแบตทิ้งวิดีโอเป็นรูปแบบอื่น มันยังไม่สามารถเล่นได้ในบราวเซอร์ทั้งหมด
ใช้แบบแบตทิ้ง <object>
แบบแบตทิ้ง <object> มีความหมายคือฝังส่วนมีเมลายาแบบมั่นใจในหน้าเว็บ HTML
ส่วน HTML ต่อไปนี้แสดงวิดีโอ Flash ที่ฝังในหน้าเว็บ
ตัวอย่าง
<object data="movie.swf" height="200" width="200"/>
ปัญหา
- หากบราวเซอร์ไม่สนับสนุน Flash วิดีโอจะไม่สามารถเล่นได้
- iPad และ iPhone ไม่สามารถแสดงวิดีโอ Flash
- หากคุณเปลี่ยนแบบแบตทิ้งวิดีโอเป็นรูปแบบอื่น มันยังไม่สามารถเล่นได้ในบราวเซอร์ทั้งหมด
ใช้แบบแบตทิ้ง <video>
video> คือแบบแบตทิ้งใหม่ใน HTML 5。
ตามรายละเอียดของแท็ก <video> คือที่จะแทรกอิเลย์น์วิดีโอไปยังหน้าเว็บ HTML
HTML ข้างต้นจะแสดงวิดีโอที่แทรกเข้าไปในเว็บไซต์ของคุณ ในรูปแบบ ogg, mp4 หรือ webm
ตัวอย่าง
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> เว็บเบราเซอร์ของคุณไม่สนับสนุนตามแบบวิดีโอ </video>
ปัญหา
- คุณต้องที่จะทำการแปลงฟอร์มตัววิดีโอให้มากมาย
- อิเลย์น์ <video> ไม่ทำงานในเว็บเบราเซอร์ที่เก่าแก่
- <video> อิเลย์น์ไม่สามารถเช็คสอบได้ด้วย HTML 4 และ XHTML
แนวทางที่ดีที่สุดของ HTML
HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
ในตัวอย่างดังกล่าวได้ใช้ 4 รูปแบบวิดีโอแตกต่างกัน อิเลย์น์ <video> ของ HTML 5 จะพยายามเล่นวิดีโอด้วยรูปแบบ mp4, ogg หรือ webm หนึ่งในหนึ่ง ถ้าเล่นไม่ได้ทั้งหมด จะกลับไปใช้อิเลย์น์ <embed>
ปัญหา
- คุณต้องจำเป็นต้องที่จะทำการแปลงฟอร์มตัววิดีโอให้มากมาย
- <video> อิเลย์น์ไม่สามารถเช็คสอบได้ด้วย HTML 4 และ XHTML
- <embed> อิเลย์น์ไม่สามารถเช็คสอบได้ด้วย HTML 4 และ XHTML
หมายเหตุ:ใช้ <!DOCTYPE html> (HTML5) ที่จะแก้ปัญหาการเช็คสอบ
แนวทางยูทูบ
ทางง่ายที่สุดในการแสดงวิดีโอใน HTML คือการใช้เว็บไซต์วิดีโอเช่น 优酷
หากคุณต้องการเล่นวิดีโอในเว็บไซต์ของคุณ คุณสามารถที่จะอัพโหลดวิดีโอไปยังเว็บไซต์วิดีโอเช่น 优酷 และใส่รหัส HTML ในเว็บไซต์ของคุณเพื่อเล่นวิดีโอ:
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
ใช้ลิงก์
หากเว็บไซต์มีลิงก์ไปยังไฟล์สื่อ ส่วนใหญ่เบราจากจะใช้ "โปรแกรมช่วยเหลือ" ที่แสดงให้เห็น
บทความรหัสที่แสดงการลิงก์ไปยังไฟล์ AVI หากผู้ใช้คลิกลิงก์นี้ เบราจากจะเริ่มตั้งค่า "โปรแกรมช่วยเหลือ" อย่างเช่น Windows Media Player เพื่อเล่นไฟล์ AVI นี้
ตัวอย่าง
<a href="movie.swf">เล่นไฟล์วิดีโอ</a>
หมายเหตุเกี่ยวกับวิดีโออิงเข้าไป
เมื่อวิดีโอถูกทำเป็นส่วนหนึ่งของเว็บไซต์ มันถูกเรียกว่าวิดีโออิงเข้าไป
หากคุณมีจองใช้วิดีโออิงเข้าไปในแอปพลิเคชัน web คุณต้องได้ตระหนักว่าหลายคนรู้สึกว่าวิดีโออิงเข้าไปเป็นสิ่งที่ทำให้ผิดหวัง
ในขณะที่เราแนะนำให้ตรวจสอบว่าผู้ใช้อาจทำให้ปิดตัวการแสดงสื่อวิดีโออิงเข้าไปในเบราจาก
คำแนะนำของเราที่ดีที่สุดคือ อย่าใส่สื่อวิดีโออิงเข้าไปในที่ที่ผู้ใช้ต้องการเห็นวิดีโอและคลิกลิงก์บางอย่าง ตัวอย่างที่ดีคือ หน้าที่ผู้ใช้ต้องการเห็นวิดีโอและคลิกลิงก์บางอย่าง หลังจากที่เปิดหน้าแล้วจะเริ่มเล่นวิดีโอ
แท็กสื่อมั่นของ HTML 4.01
แท็ก | คำอธิบาย |
---|---|
<applet> | ไม่ได้รับการสนับสนุนกำหนดแอปเล็ทที่ฝังเข้าไป |
<embed> | ไม่ได้รับการสนับสนุนกำหนดวัตถุที่ฝังเข้าไป (อนุญาตใน HTML5) |
<object> | กำหนดวัตถุที่ฝังเข้าไป |
<param> | กำหนดค่าของวัตถุ |
แท็กสื่อมั่นของ HTML 5
แท็ก | คำอธิบาย |
---|---|
<video> | แท็ก กำหนดเสียง อย่างเช่น ดนตรีหรือสายเสียงอื่น |
<embed> | แท็ก กำหนดเนื้อหาที่ฝังเข้าไป อย่างเช่น แอดอปต์ |
- หน้าก่อนหน้า แสงเสียง HTML
- หน้าต่อไป HTML YouTube