Cách chèn phụ đề VTT vào video HTML5

Khi video phát được nhưng không thấy chữ, hãy kiểm tra việc tải tệp trước khi chỉnh lại thời gian.

Gắn tệp vào trình phát

Đặt video và tệp VTT mã hóa UTF-8 trên cùng trang web. Thêm track vào bên trong video. Đường dẫn tương đối tính từ trang đang mở. srclang là ngôn ngữ của phụ đề, không nhất thiết là tiếng trong âm thanh. Đặt nhãn riêng cho từng ngôn ngữ.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

Thử một rãnh phụ đề trên trang đơn giản

Tải video minh họa và tệp VTT. Đặt cạnh trang HTML trên máy chủ thử nghiệm với tên lesson.mp4 và example-en.vtt như mã mẫu. Mở trang qua địa chỉ web để tránh các giới hạn của trình duyệt đối với tệp cục bộ.

Mẫu chỉ có câu thông báo hội thảo. Dừng ở giây thứ 8 và đối chiếu câu hiện trên màn hình. Đến giây thứ 13 câu phải biến mất. Nếu tắt phụ đề mà chữ vẫn còn, kiểm tra rãnh khác hoặc chữ đã gắn vào hình.

Theo dõi yêu cầu tải tệp khi menu trống

Mở thẻ Mạng, tải lại trang rồi chọn tiếng Anh. Nếu không có yêu cầu .vtt, kiểm tra phần tử video trên trang đã đăng: trình biên tập có thể đã xóa track khi lưu. Nếu có yêu cầu, so địa chỉ đầy đủ với thư mục đã tải tệp lên.

Đọc nội dung phản hồi. Đầu tệp phải là WEBVTT, một dòng trống và mã thời gian. Trang đăng nhập cũng có thể trả về mã 200. Nếu gặp lỗi CORS, thử phục vụ tệp cùng nguồn với trang rồi kiểm tra nguồn được phép và thuộc tính crossorigin.

Tìm điểm cắt dựa trên kiểu lệch thời gian

So thời điểm bắt đầu của ba câu dễ nhận biết với mốc phụ đề. Cùng lệch một khoảng thì kiểm tra đoạn mở đầu. Chỉ câu thứ ba chậm thì xem điểm cắt sau câu thứ hai. Nếu độ lệch tăng dần, xác nhận phiên bản video mà trình phát đang dùng.

Trên trang đã đăng, lần lượt chọn từng ngôn ngữ, kiểm tra một câu rồi tắt phụ đề. Đối chiếu chữ còn lại với hình gốc. Khi báo lỗi, gửi tên tệp video, rãnh đang chọn và thời điểm phát để đồng nghiệp tái hiện.

Ví dụ quy trình

Giọng tổng hợp tiếng Anh đọc kịch bản do EasySub viết. Ví dụ chuyển đoạn thứ ba của SRT gốc sang cách ghi VTT; không phải lần xuất mới hay bản hiệu đính chuyên nghiệp của con người.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · Tải video minh họa · SRT gốc (tiếng Anh)

Kiểm tra cả lúc hiện và lúc mất

Chọn English rồi chuyển đến giây thứ tám. Sang giây thứ mười ba, câu minh họa phải biến mất. Mở trực tiếp URL phụ đề: trang đăng nhập trả mã 200 không phải tệp VTT. Kiểm tra text/vtt; nếu khác tên miền, kiểm tra crossorigin và phản hồi CORS.