HTML5 การใช้งาน video Tag

การใช้แท็ก <video> ใน HTML5 เป็นวิธีที่ง่ายและสะดวกในการแทรกวิดีโอลงในหน้าเว็บ โดยไม่ต้องพึ่งพา plugin เสริม เช่น Flash เนื่องจาก HTML5 รองรับการเล่นวิดีโอภายในตัวเอง โดยมีการใช้รูปแบบไฟล์ที่หลากหลาย เช่น MP4, WebM, และ Ogg โดยแท็ก <video> มีคุณสมบัติและ attribute ที่หลากหลายเพื่อปรับแต่งการแสดงผลและการเล่นวิดีโอ

การใช้งานพื้นฐานของแท็ก <video>

โครงสร้างพื้นฐานของแท็ก <video> จะเป็นดังนี้

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

ในตัวอย่างนี้ มีการใช้แหล่งของไฟล์วิดีโอ (MP4, WebM, Ogg) เพื่อรองรับเบราว์เซอร์ที่ต่างกัน เบราว์เซอร์จะเลือกเล่นไฟล์ที่รองรับได้ดีที่สุด โดยใช้แท็ก <source> เพื่อกำหนดแหล่งของไฟล์

Attribute ที่สำคัญของแท็ก <video>

controls: ใช้เพื่อแสดงเครื่องมือควบคุมวิดีโอ (play, pause, volume) เช่น

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

autoplay: ให้เล่นวิดีโอทันทีเมื่อโหลดหน้าเว็บ โดยจะมีการเริ่มเล่นโดยอัตโนมัติ แต่ควรระวังว่าเบราว์เซอร์บางตัวอาจบล็อคการเล่นวิดีโออัตโนมัติหากวิดีโอมีเสียง

<video autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

loop: ให้เล่นวิดีโอซ้ำไปเรื่อยๆ

<video loop>
  <source src="video.mp4" type="video/mp4">
</video>

muted: ปิดเสียงวิดีโอ

<video muted>
  <source src="video.mp4" type="video/mp4">
</video>

preload: กำหนดวิธีที่เบราว์เซอร์โหลดข้อมูลวิดีโอก่อนที่จะเล่น โดยมีสามค่าให้เลือก ดังนี้

• none: ไม่โหลดวิดีโอก่อนจนกว่าผู้ใช้จะกดเล่น
• metadata: โหลดเฉพาะข้อมูลเมตาของวิดีโอ (เช่น ความยาววิดีโอ)
• auto: โหลดวิดีโอทั้งหมดทันทีที่เปิดหน้าเว็บ

<video preload="auto">
  <source src="video.mp4" type="video/mp4">
</video>

ตัวอย่างการใช้งาน

ตัวอย่างการใช้งานแท็ก <video> ที่มีการประยุกต์ใช้งาน attribute ต่างๆ พร้อมการระบุ fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ

<video width="640" height="360" controls autoplay loop muted preload="auto">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

การใส่คำบรรยาย (Captions)

การเพิ่มคำบรรยาย (subtitles) ให้กับวิดีโอสามารถทำได้โดยใช้แท็ก <track> ซึ่งรองรับคำบรรยายหรือ metadata อื่นๆ ในหลายภาษา ดังตัวอย่าง

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_th.vtt" kind="subtitles" srclang="th" label="Thai">
</video>

สรุป

แท็ก <video> ใน HTML5 เป็นวิธีที่สะดวกในการเพิ่มวิดีโอลงในหน้าเว็บ โดยมีการรองรับการควบคุมและปรับแต่งหลายรูปแบบ เช่น autoplay, loop, และ muted นอกจากนี้ยังรองรับการใส่คำบรรยายและมีการ fallback ในกรณีที่เบราว์เซอร์ไม่รองรับ