วีดีโอ HTML

มีหลายวิธีที่สามารถเล่นวิดีโอใน 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> แท็ก กำหนดเนื้อหาที่ฝังเข้าไป อย่างเช่น แอดอปต์