WebVTT là gì?

WebVTT (Web Video Text Tracks Format) là một định dạng phụ đề dựa trên văn bản dùng để thêm các đoạn văn bản có thời gian vào video. Đây là định dạng chính thức được HTML5 hỗ trợ thông qua phần tử <track>, cho phép bạn thêm:

• Phụ đề (bản dịch lời nói)
• Chú thích (lời nói và hiệu ứng âm thanh)
• Mô tả (thông tin hình ảnh cho trình đọc màn hình)
• Chương (điểm điều hướng trong video)
• Siêu dữ liệu

Cấu trúc cơ bản của WebVTT

• Một tệp WebVTT bao gồm:
  • Một đầu đề tùy chọn (WEBVTT).
  • Siêu dữ liệu tùy chọn (bình luận hoặc khối style/script).
  • Cue (đoạn văn bản có thời gian và nội dung).

1. Định dạng Cue

Một cue có cấu trúc sau:

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

• Thời gian: Thời gian bắt đầu và kết thúc ở định dạng HH:MM:SS.mmm.
• Cài đặt (tùy chọn):
  • vertical (lr/rl cho văn bản dọc)
  • line (định vị)
  • position (căn chỉnh ngang)
  • size (độ rộng/phần trăm)
  • align (bắt đầu/giữa/cuối)

2. Nội dung Cue

Có thể là văn bản thuần hoặc bao gồm markup:

• Thẻ: <b>, <i>, <u>, <ruby>, <lang>, v.v.
• Dấu thời gian (<00:00:05.000>) cho văn bản kiểu karaoke.

3. Định dạng & CSS

Định dạng có thể được áp dụng qua:

• Cue nội tuyến (sử dụng thẻ).
• Pseudo-element CSS (::cue, ::cue-region) trong HTML.

4. Đường dẫn Siêu dữ liệu

WebVTT có thể chứa siêu dữ liệu (JSON, v.v.) cho các ứng dụng tương tác.

5. Mã hoá Tệp

• Phải được mã hoá UTF-8.
• Các dòng kết thúc bằng \r\n, \n, hoặc \r.

6. Quy tắc Xử lý

• Bộ phân tích phải xử lý các tệp bị lỗi một cách nhẹ nhàng.
• BOM (Byte Order Mark) là tùy chọn.

7. Tích hợp HTML5

Được sử dụng với phần tử <track>:

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

• kind có thể là subtitles, captions, descriptions, chapters, hoặc metadata.

8. Hỗ trợ Trình duyệt

Được hỗ trợ rộng rãi trên các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge).

9. Trường hợp sử dụng

• Phụ đề/Chú thích cho khả năng tiếp cận.
• Lời bài hát karaoke với văn bản có thời gian.
• Điều hướng chương trong video.
• Siêu dữ liệu cho các ứng dụng video tương tác.

Ví dụ về tệp 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.

Các công cụ tìm kiếm không thể “xem” video của bạn—nhưng chúng có thể đọc nội dung dựa trên văn bản. Bằng cách sử dụng các tệp WebVTT, bạn thêm văn bản có thể lập chỉ mục mà:

• Cải thiện khả năng khám phá: Google có thể lập chỉ mục các chú thích và bản ghi, giúp video của bạn xuất hiện trong nhiều kết quả tìm kiếm hơn.
• Tăng mức độ tương tác: Video có phụ đề giữ người dùng ở lại lâu hơn—tăng thời lượng phiên và giảm tỷ lệ thoát.
• Nâng cao khả năng tiếp cận: Việc thêm phụ đề là cần thiết cho người khiếm thính hoặc khó nghe, và được ưu tiên trong các thuật toán xếp hạng SEO.

Khi một tệp WebVTT được liên kết với video trên một trang web, Google có thể phân tích và hiểu đoạn văn bản có thời gian, làm cho nội dung trở nên phù hợp hơn với một số truy vấn.

Cách thêm WebVTT vào video HTML5

Bạn có thể chèn một tệp WebVTT vào video bằng phần tử <track>:

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

• src: Đường dẫn tới tệp .vtt của bạn
• kind: Loại đoạn văn bản (subtitles, captions, chapters, v.v.)
• srclang: Mã ngôn ngữ (ví dụ: en, es)
• label: Nhãn đoạn được hiển thị trong trình phát

WebVTT vs SRT: Sự khác nhau là gì?

Công cụ tạo và chỉnh sửa tệp WebVTT

Bạn có thể tạo hoặc chỉnh sửa tệp .vtt bằng:

• Trình soạn thảo văn bản: VS Code, Sublime Text
• Trình chỉnh sửa phụ đề: Subtitle Edit, Amara, Aegisub
• Công cụ chuyển đổi: Sử dụng công cụ để chuyển đổi SRT sang VTT và ngược lại

Cách mở tệp WebVTT?

Để mở tệp WebVTT (.vtt), bạn có thể dùng bất kỳ trình soạn thảo văn bản hoặc trình chỉnh sửa phụ đề nào.

Mở bằng Trình soạn thảo Văn bản

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

Vì các tệp .vtt là văn bản thuần, bạn có thể xem và chỉnh sửa chúng như bất kỳ tệp văn bản thông thường nào.

Mở bằng Trình chỉnh sửa phụ đề

Để có định dạng tốt hơn, xem trước và đồng bộ:

• Subtitle Edit (Windows)
• Aegisub (đa nền tảng)
• Amara (dựa trên web)

Mở trong Trình duyệt

1. Tạo một tệp HTML đơn giản có thẻ <video> và <track>.
2. Mở tệp HTML trong trình duyệt để xem video với phụ đề.

Đặc điểm chính của tệp ASS

Câu hỏi thường gặp

Câu hỏi 1: Sự khác nhau giữa WebVTT và SRT là gì?
Trả lời: WebVTT dựa trên SRT nhưng bổ sung các tính năng quan trọng như định vị văn bản, thẻ giọng nói, định dạng CSS và hỗ trợ siêu dữ liệu, cùng với tích hợp gốc trong video HTML5.

Câu hỏi 2: Làm thế nào để thêm phụ đề WebVTT vào YouTube?
Trả lời: Tải lên tệp .vtt của bạn khi thêm phụ đề vào video, hoặc sử dụng tính năng tạo phụ đề tự động của YouTube và tải xuống tệp WebVTT đã tạo để chỉnh sửa.

Câu hỏi 3: Tệp WebVTT có thể bao gồm hình ảnh không?
Trả lời: Đặc tả WebVTT không hỗ trợ trực tiếp nhúng hình ảnh, nhưng bạn có thể sử dụng cue siêu dữ liệu với URL và triển khai hiển thị hình ảnh tùy chỉnh bằng JavaScript.

Câu hỏi 4: Tại sao định dạng WebVTT của tôi không áp dụng?
Trả lời: Kiểm tra các khối STYLE xuất hiện trước cue đầu tiên, không có dòng trống, và sử dụng pseudo-element ::cue đúng cách. Đồng thời xác nhận tính tương thích của trình duyệt.

Câu hỏi 5: Tệp WebVTT có hoạt động với các giao thức truyền phát như HLS không?
Trả lời: Có, HLS (HTTP Live Streaming) hỗ trợ WebVTT phân đoạn để truyền phụ đề hiệu quả cùng với nội dung video.

Tham khảo

• WebVTT: Định dạng Văn bản Video trên Web