วิดีโอ 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）都能够播放。

ในบทนี้ โค้ด W3C.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>

HTML5 ใช้แบตท์ <video> คือแบตท์ใหม่

แบบองค์ประกอบ <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> ไม่ทำงานในเบราเซอร์ที่เก่า
  • <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> แบตทิ้งต่อไปนี้กำหนดเนื้อหาที่ทำงานภายในเฉพาะเจาะจง เช่น โปรแกรมแบบบริการ