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

ใน HTML5, แท็ก <track> ถูกใช้เพื่อเพิ่มคำบรรยายหรือข้อมูล metadata ให้กับวิดีโอหรือเสียงในรูปแบบต่าง ๆ เช่น คำบรรยาย (subtitles), คำบรรยายคำพูด (captions), และคำอธิบายเสียง (descriptions) โดยแท็กนี้จะทำงานร่วมกับแท็ก <video> หรือ <audio> การใช้งาน <track> มักใช้ในกรณีที่ต้องการให้ผู้ใช้สามารถเลือกเปิด/ปิดคำบรรยายในขณะดูวิดีโอ

รูปแบบการใช้งานแท็ก <track>

1. การใช้งานพื้นฐาน: Subtitles (คำบรรยายภาษา)

สามารถใช้แท็ก <track> เพื่อแสดงคำบรรยายที่เป็นภาษาอื่นนอกเหนือจากภาษาในวิดีโอ

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

• kind: กำหนดประเภทของ track ในกรณีนี้คือ subtitles (คำบรรยาย)
• src: กำหนดไฟล์ที่ใช้สำหรับแสดงคำบรรยาย ซึ่งไฟล์ต้องอยู่ในรูปแบบ .vtt (WebVTT)
• srclang: กำหนดภาษาของคำบรรยาย (ภาษาอังกฤษใช้ en, ภาษาไทยใช้ th)
• label: กำหนดชื่อที่จะแสดงใน UI เพื่อให้ผู้ใช้เลือก

2. Captions (คำบรรยายคำพูด)

คำบรรยายคำพูดนั้นจะแสดงสิ่งที่ถูกพูดในวิดีโอ รวมถึงเสียงอื่น ๆ ที่สำคัญ เช่น เสียงเพลงหรือเสียงเอฟเฟกต์

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>

3. Descriptions (คำบรรยายเสียง)

ใช้สำหรับบรรยายสิ่งที่เกิดขึ้นในวิดีโอในกรณีที่ผู้ใช้ไม่สามารถมองเห็นได้ เช่น เพื่อช่วยให้ผู้พิการทางสายตาเข้าใจเหตุการณ์ในวิดีโอ

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="descriptions" src="descriptions_en.vtt" srclang="en" label="English Descriptions">
</video>

4. Chapters (บท)

ช่วยให้ผู้ใช้สามารถกระโดดไปยังส่วนต่าง ๆ ของวิดีโอได้ โดยระบุบทหรือหัวข้อของวิดีโอ

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters">
</video>

5. Metadata (ข้อมูลเพิ่มเติม)

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

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="metadata" src="metadata.vtt">
</video>

คุณสมบัติสำคัญของ <track>

default: กำหนดให้คำบรรยายนี้เป็นค่าเริ่มต้น

<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>

ในกรณีที่เบราว์เซอร์ไม่รองรับแท็ก <track>, คำบรรยายจะไม่แสดง แต่วิดีโอหรือเสียงยังสามารถเล่นได้ตามปกติ.

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