วิธาสร้างชื่อเรื่องของ Text Track ใน HTML

ใช้แอตทริบิวต์ label ใน HTML เพื่อสร้างชื่อเรื่อง (Title/Label) ของ Text Track ใน HTML แสดงในเมนูเลือก Subtitle/Caption ของเบราว์เซอร์

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ label:

<!DOCTYPE HTML>
<html>
  <body>
    <video width="450" height="300" controls autoplay>
      <source src="/html5/foo.ogg" type="video/ogg" />
      <source src="/html5/foo.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="ไทย" default>
      <track src="subtitles_ja.vtt" kind="subtitles" srclang="ja" label="日本語">
      Your browser does not support the video element.
    </video>
  </body>
</html>

แอตทริบิวต์ของ <track> ที่เกี่ยวข้อง

ค่า kind ที่เป็นไปได้

• subtitles - คำบรรยายแปลภาษา (สำหรับคนได้ยินแต่ไม่เข้าใจภาษา)
• captions - คำบรรยายรวมเสียงเอฟเฟกต์ (สำหรับคนว้าว/หูหนวก)
• descriptions - คำอธิบายภาพ (สำหรับคนตาบอด/อ่านโดย Screen reader)
• chapters - หัวข้อบท/ช่วงเวลา (ใช้สำหรับ Navigation)
• metadata - ข้อมูลเมตาสำหรับ JavaScript (ไม่แสดงให้ผู้ใช้เห็น)

ตัวอย่าง Chapters Track

<track src="chapters.vtt" kind="chapters" label="Chapters">


WEBVTT

Chapter 1
00:00:00.000 --> 00:05:00.000
Introduction

Chapter 2
00:05:00.000 --> 00:15:00.000
Main Content

Chapter 3
00:15:00.000 --> 00:20:00.000
Conclusion

หมายเหตุ: ไฟล์ Track ต้องเป็นรูปแบบ WebVTT (.vtt) และต้อง Serve ด้วย MIME type text/vtt พร้อม CORS header ถ้าอยู่โดเมนต่างกัน