แสดงวิดีโอ 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> ใช้ในการแทรก element วิดีโอลงในหน้า 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" />
เบราเซอร์ของคุณไม่สนับสนุน tag วิดีโอ
</video>

ทดลองด้วยตัวเอง

ปัญหา

  • คุณจำเป็นต้องแปลงรูปแบบวิดีโอเป็นหลายรูปแบบ
  • element <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 รูปแบบ HTML 5 <video> จะพยายามเล่นวิดีโอด้วยรูปแบบ 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>

ทดลองด้วยตัวเอง

หมายเหตุเกี่ยวกับวิดีโอซ้อน

วิดีโอที่ถูกแทรกในเว็บไซต์เรียกว่าวิดีโอซ้อน

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

และโปรดระวังว่าผู้ใช้อาจได้ปิดตัวที่ใช้งานวิดีโอซ้อนของบราวเซอร์

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

HTML 4.01 แทรกสื่อ

แทรก การอธิบาย
<applet> ไม่ได้สนับสนุนกำหนด applet ที่ถูกแทรก
<embed> ไม่ได้สนับสนุนกำหนดวัตถุที่ถูกแทรก (อนุญาตใน HTML5)
<object> กำหนดวัตถุที่ถูกแทรก
<param> กำหนดพารามิเตอร์ของวัตถุ

HTML 5 แทรกสื่อ

แทรก การอธิบาย
<video> แทรกเสียง อย่างเช่น เพลงหรือสตรีมงานเสียงอื่น
<embed> แทรกเนื้อหาที่ถูกนำเสนอโดยแทรก อย่างเช่น สไตล์