SRT vs WebVTT: Khác Biệt Kỹ Thuật và Cách Chuyển Đổi

💡 SRT và WebVTT đều mang cùng dữ liệu phụ đề có dấu thời gian, nhưng khác nhau ở ba điểm: WebVTT yêu cầu dòng header WEBVTT ở đầu file, dùng dấu chấm thay dấu phẩy cho mili-giây (00:00:11,500 thành 00:00:11.500), và bổ sung cài đặt vị trí cue cùng block CSS STYLE. Chuyển đổi bằng ffmpeg -i in.srt out.vtt - không cần re-encode video.

Sự khác biệt kỹ thuật thực sự giữa SRT và WebVTT là gì?

Tôi giao file phụ đề ở cả hai định dạng thường xuyên: SRT cho khách hàng cần file văn bản thuần được mọi player và NLE chấp nhận, WebVTT cho nhà phát triển web cần thẻ <track> HTML5 với định vị chính xác. Cả hai chia sẻ cùng mô hình cốt lõi - một chuỗi cue được đánh số, mỗi cue có thời gian bắt đầu, thời gian kết thúc và các dòng văn bản - nhưng WebVTT là tiêu chuẩn W3C chính thức với nhiều tính năng SRT không có.

Đây là cùng một cue phụ đề trong SRT và WebVTT. Nội dung văn bản giống nhau hoàn toàn; cơ chế định dạng khác:

SRT:

1
00:00:10,000 --> 00:00:14,500
Lưu ý dấu phẩy sau giây.
Dấu chấm ở đây sẽ làm hỏng mọi SRT parser.

2
00:00:15,000 --> 00:00:18,200
Các cue được phân cách bằng dòng trống.
Không có dòng header nào phía trên cue 1.

WebVTT (cùng nội dung):

WEBVTT

1
00:00:10.000 --> 00:00:14.500
Lưu ý dấu chấm sau giây.
Dấu phẩy ở đây sẽ làm hỏng mọi WebVTT parser.

2
00:00:15.000 --> 00:00:18.200
Các cue vẫn được phân cách bằng dòng trống.
Header WEBVTT và một dòng trống đứng trước cue 1.

Các điểm khác biệt:

• Header WEBVTT: có trong WebVTT, không có trong SRT.
• Dòng trống sau header: bắt buộc trong WebVTT trước cue đầu tiên.
• Ký tự phân cách mili-giây: , trong SRT so với . trong WebVTT. Một ký tự này là nguyên nhân phổ biến nhất gây lỗi parser khi sao chép timestamp giữa hai định dạng.

Cài đặt vị trí cue trong WebVTT

WebVTT cho phép thêm cài đặt vị trí vào dòng timing của từng cue. Tôi dùng tính năng này khi nhà phát triển web cần vị trí phụ đề cụ thể, thay vì dựa vào vị trí mặc định dưới-giữa của player. SRT không có trường tương đương.

WEBVTT

subtitle-01
00:00:10.000 --> 00:00:14.500 line:85% position:50%,center size:80% align:center
Cue này nằm gần cuối khung hình, căn giữa, tối đa 80% chiều rộng.

subtitle-02
00:00:15.000 --> 00:00:18.200 line:10% position:50%,center
Cue này nằm gần đầu khung hình.

subtitle-03
00:00:19.000 --> 00:00:22.000 vertical:rl line:10%
Văn bản dọc chạy từ phải sang trái.

Các cài đặt chính:

• line:: vị trí theo chiều dọc tính bằng phần trăm (0% = đầu, 100% = cuối) hoặc số nguyên đếm theo dòng. Số nguyên âm đếm từ cạnh dưới.
• position:: vị trí theo chiều ngang tính bằng phần trăm, kèm căn lề tùy chọn (line-left, center, line-right).
• size:: chiều rộng cue box tính bằng phần trăm chiều rộng video.
• align:: căn lề văn bản trong cue box: start, center, end, left, hoặc right.
• vertical:: hướng văn bản dọc. rl = phải sang trái, lr = trái sang phải. Dùng cho chữ CJK dọc.

Làm thế nào để thêm CSS styling bằng WebVTT STYLE block?

STYLE block được đặt trước cue đầu tiên và áp dụng CSS cho tất cả cue qua pseudo-element ::cue. Hai ràng buộc quan trọng từ đặc tả W3C mà tôi đã từng mắc phải: stylesheet không được chứa dòng trống (dòng trống kết thúc block), và chuỗi --> không được xuất hiện bên trong.

WEBVTT

STYLE
::cue {
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.75);
}
::cue(b) {
  font-weight: bold;
  color: #FFD700;
}
::cue(v[voice="Narrator"]) {
  color: #ADD8E6;
}

1
00:00:10.000 --> 00:00:14.500
Đây là văn bản <b>vàng đậm</b>.

2
00:00:15.000 --> 00:00:18.200
<v Narrator>Dòng này dùng style giọng Narrator.</v>

Các điểm chính:

• ::cue nhắm vào tất cả cue toàn cục. ::cue(b) nhắm vào cue chứa span <b>; ::cue(v[voice="..."]) nhắm vào voice span theo tên người nói.
• Không được có dòng trống trong STYLE block. Parser đọc dòng trống đầu tiên là kết thúc stylesheet.
• Trình duyệt hỗ trợ ::cue tốt trên Chrome, Firefox và Safari. ::cue-region có trong đặc tả nhưng chưa trình duyệt nào triển khai tính đến năm 2026.
• STYLE block bị loại bỏ hoàn toàn khi chuyển đổi sang SRT. Nếu giao diện hiển thị quan trọng, hãy burn phụ đề vào video bằng ffmpeg thay vì dựa vào player render ::cue.

Làm thế nào để chuyển đổi SRT sang WebVTT và ngược lại?

Với file đơn, ffmpeg là cách nhanh nhất. Nó tự nhận diện cả hai định dạng qua phần mở rộng và chuyển đổi thuần túy trên văn bản - không cần giải mã luồng video:

# SRT sang WebVTT
ffmpeg -i in.srt out.vtt

# WebVTT sang SRT
ffmpeg -i in.vtt out.srt

Cách hoạt động nội bộ: ffmpeg đọc SRT qua demuxer subrip và ghi WebVTT qua encoder webvtt (hoặc ngược lại). Việc thay thế dấu phẩy bằng dấu chấm tự động. Không cần flag thêm; định dạng được suy ra từ phần mở rộng file.

Với nhiều file, tôi dùng SeConv. Tên định dạng phân biệt chữ hoa chữ thường:

# Chuyển đổi thư mục SRT sang WebVTT
seconv *.srt WebVTT --output-folder:out/ --overwrite

# Chuyển đổi thư mục VTT sang SRT
seconv *.vtt SubRip --output-folder:out/ --overwrite

# Xem tất cả tên định dạng được hỗ trợ
seconv formats

SeConv xuất timestamp đầy đủ ba thành phần (HH:MM:SS.mmm) trong output WebVTT - lựa chọn an toàn nhất cho tương thích đa player.

Dữ liệu nào bị mất khi chuyển WebVTT về SRT?

Chuyển SRT sang WebVTT là quá trình không mất dữ liệu: trình chuyển đổi chỉ thêm header và đổi dấu phẩy thành dấu chấm. Chiều ngược lại loại bỏ im lặng mọi thứ SRT không thể biểu diễn:

• Cài đặt vị trí cue: line:, position:, size:, align: bị xóa hoàn toàn.
• STYLE block: toàn bộ CSS bị loại bỏ. Không có font, màu hay background nào còn.
• REGION và NOTE block: bị loại bỏ.
• Tên cue identifier: nếu VTT dùng string identifier (như subtitle-01), SeConv sẽ đánh số lại; ffmpeg giữ nguyên nếu đã là số.

Nội dung văn bản có thời gian - các từ thực sự - tồn tại nguyên vẹn ở cả hai chiều. Nếu VTT không có cài đặt vị trí hay STYLE block, chuyển đổi sang SRT và quay lại hoàn toàn an toàn.

Tự làm được gì và khi nào cần chuyên gia?

Việc chuyển đổi cơ học là điều bất kỳ nhà phát triển hay biên tập viên nào cũng làm được với các lệnh trên. ffmpeg và SeConv đều miễn phí, có tài liệu tốt, và xử lý đúng. Tôi thực hiện chuyển đổi này thường xuyên và không cần hỗ trợ bên ngoài cho việc đổi định dạng đơn thuần.

Những trường hợp phức tạp hơn:

• Nếu file nguồn được tạo bởi máy (Whisper auto-captions hay YouTube auto-track), timing và tốc độ đọc thường cần người xem xét lại trước khi phân phối.
• Nếu phân phối là bản dịch - nguồn tiếng Anh, output bằng tiếng Việt hay ngôn ngữ khác - các dòng dịch thường dài hoặc ngắn hơn bản gốc, đòi hỏi điều chỉnh timing để giữ tốc độ đọc hợp lý. Đây là công việc đằng sau dịch phụ đề chuyên nghiệp: khớp văn bản đã dịch vào cấu trúc timing gốc.
• Nếu đích đến yêu cầu SCC, SMPTE-TT hay MCC, cả SRT lẫn WebVTT đều không phải định dạng phân phối cuối và cần quy trình broadcast caption.

Với một lần đổi định dạng đơn giản trên file phụ đề sạch, các lệnh trên là tất cả những gì cần.

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

Nguồn

• W3C WebVTT: The Web Video Text Tracks Format - Đặc tả đầy đủ: header, cú pháp cue, timestamp, cài đặt vị trí, STYLE block và CSS ::cue. Verified tháng 10 năm 2026.
• MDN Web Docs: WebVTT API - Hỗ trợ trình duyệt, tham chiếu cài đặt cue và pseudo-element ::cue. Verified tháng 10 năm 2026.
• Tài liệu ffmpeg Formats - Các mục WebVTT và SubRip (SRT); tên encoder webvtt đã xác nhận. Verified tháng 10 năm 2026.
• Subtitle Edit / SeConv - Tên định dạng (SubRip, WebVTT) và cú pháp --output-folder: đã xác nhận với SeConv 5.0. Verified tháng 10 năm 2026.