WebVTT คืออะไร?

WebVTT (Web Video Text Tracks Format) เป็น รูปแบบคำบรรยายที่ใช้ข้อความ เพื่อเพิ่มแทร็กข้อความตามเวลาในวิดีโอ มันเป็นรูปแบบอย่างเป็นทางการที่ HTML5 รองรับผ่านองค์ประกอบ <track> ทำให้คุณสามารถเพิ่ม:

• คำบรรยาย (การแปลคำพูด)
• คำอธิบาย (คำพูดและเสียงเอฟเฟกต์)
• คำอธิบาย (ข้อมูลภาพสำหรับโปรแกรมอ่านหน้าจอ)
• บท (จุดที่สามารถนำทางได้ในวิดีโอ)
• เมตาดาต้า

โครงสร้างพื้นฐานของ WebVTT

• ไฟล์ WebVTT ประกอบด้วย:
  • ส่วนหัว (header) ที่เป็น optional (WEBVTT).
  • เมตาดาต้า (คอมเมนต์หรือบล็อกสไตล์/สคริปต์) ที่เป็น optional.
  • Cue (ส่วนข้อความที่มีการกำหนดเวลาและข้อมูล).

1. รูปแบบ Cue

A cue has the following structure:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• การกำหนดเวลา: เวลาเริ่มและสิ้นสุดในรูปแบบ HH:MM:SS.mmm.
• การตั้งค่า (optional):
  • vertical (lr/rl สำหรับข้อความแนวตั้ง)
  • line (การกำหนดตำแหน่ง)
  • position (การจัดแนวแนวนอน)
  • size (ความกว้าง/เปอร์เซ็นต์)
  • align (เริ่ม/กลาง/สิ้นสุด)

2. เนื้อหา Cue

• สามารถเป็นข้อความธรรมดาหรือรวม markup:
  • แท็ก: <b>, <i>, <u>, <ruby>, <lang> เป็นต้น
  • Timestamp (<00:00:05.000>) สำหรับข้อความสไตล์คาราโอเกะ

3. การจัดรูปแบบและ CSS

• การจัดรูปแบบสามารถใช้ได้ผ่าน:
  • Cue แบบอินไลน์ (ใช้แท็ก)
  • pseudo-element ของ CSS (::cue, ::cue-region) ใน HTML

4. แทร็กเมตาดาต้า

WebVTT สามารถบรรจุ เมตาดาต้า (JSON ฯลฯ) สำหรับแอปพลิเคชันเชิงโต้ตอบ

5. การเข้ารหัสไฟล์

• ต้องเป็นการเข้ารหัส UTF-8
• บรรทัดจบด้วย \r\n, \n หรือ \r

6. กฎการประมวลผล

• ตัวพาร์สต้องจัดการไฟล์ที่ผิดรูปแบบอย่างราบรื่น
• BOM (Byte Order Mark) เป็นตัวเลือก

7. การรวมกับ HTML5

ใช้กับองค์ประกอบ <track>:

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>

• kind สามารถเป็น subtitles, captions, descriptions, chapters หรือ metadata

8. การสนับสนุนของเบราว์เซอร์

• รองรับอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ (Chrome, Firefox, Safari, Edge)

9. กรณีการใช้งาน

• คำบรรยาย/คำอธิบาย เพื่อการเข้าถึง
• เนื้อเพลงคาราโอเกะ ที่มีการกำหนดเวลา
• การนำทางบท ในวิดีโอ
• เมตาดาต้า สำหรับแอปวิดีโอเชิงโต้ตอบ

ตัวอย่างไฟล์ WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

เครื่องมือค้นหาไม่สามารถ “ดู” วิดีโอของคุณได้—แต่พวกมันสามารถอ่าน เนื้อหาที่เป็นข้อความ ได้ การใช้ไฟล์ WebVTT ทำให้คุณเพิ่ม ข้อความที่สามารถทำดัชนีได้ ที่:

• เพิ่มการค้นพบ: Google สามารถทำดัชนีคำอธิบายและบทถอดเสียง ทำให้วิดีโอของคุณปรากฏในผลการค้นหาเพิ่มขึ้น
• เพิ่มการมีส่วนร่วม: วิดีโอที่มีคำบรรยายทำให้ผู้ใช้ใช้เวลานานขึ้น—เพิ่มระยะเวลาการเยี่ยมชมและลดอัตราการตีกลับ
• เพิ่มการเข้าถึง: การใส่คำอธิบายเป็นสิ่งสำคัญสำหรับผู้ที่หูตาบอดหรือมีปัญหาการได้ยิน และยังเป็นปัจจัยที่ช่วยในอัลกอริทึมการจัดอันดับ SEO

เมื่อไฟล์ WebVTT ถูกเชื่อมโยงกับวิดีโอบนหน้าเว็บ, Google สามารถวิเคราะห์และเข้าใจข้อความตามเวลานั้น ทำให้เนื้อหามีความเกี่ยวข้องกับคำค้นบางประเภทมากขึ้น.

วิธีเพิ่ม WebVTT ลงในวิดีโอ HTML5

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

• src: เส้นทางไปยังไฟล์ .vtt ของคุณ
• kind: ประเภทของแทร็กข้อความ (subtitles, captions, chapters ฯลฯ)
• srclang: รหัสภาษา (เช่น en, es)
• label: ป้ายชื่อแทร็กที่แสดงในตัวเล่น

WebVTT กับ SRT: ความแตกต่างคืออะไร?

เครื่องมือสำหรับสร้างและแก้ไขไฟล์ WebVTT

• โปรแกรมแก้ไขข้อความ: VS Code, Sublime Text
• โปรแกรมแก้ไขคำบรรยาย: Subtitle Edit, Amara, Aegisub
• ตัวแปลง: ใช้เครื่องมือเพื่อแปลง SRT เป็น VTT และกลับกัน

วิธีเปิดไฟล์ WebVTT

เพื่อเปิดไฟล์ WebVTT (.vtt) คุณสามารถใช้ โปรแกรมแก้ไขข้อความ หรือ โปรแกรมแก้ไขคำบรรยาย ใดก็ได้

เปิดด้วยโปรแกรมแก้ไขข้อความ

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

เนื่องจากไฟล์ .vtt เป็นข้อความธรรมดา คุณสามารถดูและแก้ไขได้เช่นเดียวกับไฟล์ข้อความทั่วไป

เปิดด้วยโปรแกรมแก้ไขคำบรรยาย

• Subtitle Edit (Windows)
• Aegisub (ข้ามแพลตฟอร์ม)
• Amara (เว็บเบส)

เปิดในเบราว์เซอร์

1. สร้างไฟล์ HTML ง่าย ๆ ที่มีแท็ก <video> และ <track>
2. เปิดไฟล์ HTML ในเบราว์เซอร์เพื่อดูวิดีโอพร้อมคำบรรยาย

คุณลักษณะสำคัญของไฟล์ ASS

คำถามที่พบบ่อย

ถาม 1: ความแตกต่างระหว่าง WebVTT กับ SRT คืออะไร?

A: WebVTT มีพื้นฐานมาจาก SRT แต่เพิ่มคุณสมบัติสำคัญเช่น การกำหนดตำแหน่งข้อความ, แท็กเสียง, การจัดรูปแบบด้วย CSS, และการรองรับเมตาดาต้า รวมถึงการผสานโดยเนทีฟกับวิดีโอ HTML5

ถาม 2: ฉันจะเพิ่มคำบรรยาย WebVTT ลงใน YouTube อย่างไร?

A: อัปโหลดไฟล์ .vtt ของคุณเมื่อเพิ่มคำบรรยายให้กับวิดีโอ หรือใช้ระบบสร้างคำบรรยายอัตโนมัติของ YouTube แล้วดาวน์โหลดไฟล์ WebVTT ที่สร้างขึ้นเพื่อแก้ไขต่อ

ถาม 3: ไฟล์ WebVTT สามารถรวมรูปภาพได้หรือไม่?

A: สเปค WebVTT ไม่รองรับการฝังรูปภาพโดยตรง แต่คุณสามารถใช้ cue เมตาดาต้าที่มี URL ของรูปภาพและทำการเรนเดอร์รูปภาพด้วย JavaScript เองได้

ถาม 4: ทำไมสไตล์ WebVTT ของฉันไม่ทำงาน?

A: ตรวจสอบว่า block STYLE ปรากฏก่อน cue แรก, ไม่มีบรรทัดว่างระหว่างบล็อก, และใช้ pseudo‑element ::cue อย่างถูกต้อง นอกจากนี้ยังต้องตรวจสอบความเข้ากันได้ของเบราว์เซอร์

ถาม 5: ไฟล์ WebVTT ทำงานกับโปรโตคอลสตรีมมิ่งเช่น HLS หรือไม่?

A: ใช่, HLS (HTTP Live Streaming) รองรับ WebVTT แบ่งส่วนเพื่อสตรีมคำบรรยายพร้อมกับวิดีโออย่างมีประสิทธิภาพ

แหล่งอ้างอิง

• WebVTT: รูปแบบ Web Video Text Tracks