Tạo phần tử track HTML
Hoặc dán văn bản phụ đề
Tùy chọn
Subtitles dành cho người xem nghe được âm thanh và cần phần chữ — một bản dịch, hoặc cùng một ngôn ngữ được viết ra. Captions dành cho người xem không nghe được, nên chúng còn mang những gì âm thanh nói với mọi người khác: nhạc, tiếng cửa, tiếng điện thoại reo. Cùng một tệp có thể phục vụ cả hai mục đích, đó là lý do trang hỏi thay vì đoán, và giá trị này không thể thay đổi sau đó từ bên trong phần tử. Descriptions, chapters và metadata không được đưa ra: không loại nào trong số đó có thể được điền bằng nội dung của một tệp phụ đề.
Một thẻ ngôn ngữ ngắn như en, en-GB hoặc pt-BR, nêu ngôn ngữ của phần chữ trong phụ đề, không phải ngôn ngữ của video. Một track tự nhận là subtitles bắt buộc phải nêu ngôn ngữ, nên xóa ô này sẽ quay về en thay vì bỏ thuộc tính — và vì mọi thuộc tính đều được in ra trong kết quả, bạn có thể thấy giá trị dự phòng trước khi dán bất cứ thứ gì.
Văn bản tự do: English, English (SDH), Français. Đây là dòng người xem chọn khi một trang có nhiều hơn một track, nên hãy viết theo cách khán giả của bạn nhận ra. Xóa ô này sẽ bỏ hẳn thuộc tính thay vì ghi một thuộc tính rỗng, trả việc đặt tên lại cho trình phát; một nhãn rỗng sẽ tạo một dòng không tên trong menu đó.
Bật, phụ đề hiện ra ngay khi video phát. Một phần tử media chỉ có thể có một track mặc định, nên hãy để tắt khi trang đã có một track như vậy: một track thứ hai tự nhận là mặc định khiến trình phát chọn sai, trong khi không phải mặc định chỉ có nghĩa là người xem tự bật nó lên.
Các mốc thời gian được tính theo frame rate nào. Trên các trang định dạng, đây là thông số MicroDVD cần, vì định dạng này lưu thời gian dưới dạng số khung hình. Trên các trang frame rate, đây là tốc độ mà tệp được tính theo — phiên bản mà phụ đề được làm cho — và ô thứ hai của trang nhận tốc độ của video mà bạn sẽ dùng phụ đề cùng. 23.976, 24, 25, 29.97, 30, 50, 59.94 và 60 là những giá trị thường gặp. Điền sai sẽ làm lệch toàn bộ dòng thời gian, và trên các trang frame rate, nó làm lệch theo một tỉ lệ chứ không phải một lượng cố định.
Trang này đặt phụ đề của bạn vào một phần tử HTML duy nhất để dán vào trang web. Đầu ra là một dòng `<track>` với WebVTT nhúng thẳng trong thuộc tính `src`, nên phần chữ đi cùng đoạn mã: không có tệp thứ hai phải tải lên, không có đường dẫn nào phải đặt đúng, và trình phát không thể đi tìm một thứ không tồn tại. Việc dựng phần tử chạy trọn trong tab, và tệp phụ đề của bạn không được gửi tới máy chủ nào.
Nhúng thẳng là lý do trang này tồn tại, và lý do nằm ở cách trình duyệt đối xử với tệp cục bộ. Track được tải về chứ không được vẽ ra, mà trình duyệt từ chối tải khi trang được mở từ đĩa, nên một thẻ `<track src="film.vtt">` trên trang bạn lưu ở desktop sẽ không hiện gì: không báo lỗi trên màn hình, menu phụ đề trống, chỉ một dòng trong console mà hầu như không ai mở. Một URI `data:` thì không bị tải — chữ đã nằm sẵn trong thuộc tính — nên nó chạy được ở đó. Cái giá là dung lượng, vì mỗi dấu cách hay xuống dòng của WebVTT thành ba ký tự, nhưng với một phần tử sinh ra để đứng một mình thì cái giá đó xứng đáng.
Các thuộc tính đến từ những ô trên bảng điều khiển, vì không ô nào đọc được từ tệp của bạn. `kind` quan trọng nhất: subtitles dành cho người xem không theo kịp âm thanh, còn captions là bản đầy đủ hơn, mang cả nhạc và hiệu ứng âm thanh cho người xem không nghe được. Một tệp đầy `[door slams]` và nốt nhạc có thể là loại nào cũng được, và chỉ bạn biết nó dành cho khán giả nào — nên trang hỏi thay vì đoán. Ba ô còn lại là ngôn ngữ của phần chữ, tên hiện trong menu phụ đề của trình phát, và việc track có tự mở hay không.
Ví dụ
Tệp SRT với các ô mặc định
Đầu vào
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Kết quả
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Đầu ra chỉ một dòng, mà cả tệp nằm trong đó: %0A là xuống dòng và %20 là dấu cách, nên WebVTT đi theo trong thuộc tính src thay vì nằm trong một tệp bên cạnh trang. Bốn thuộc tính là bốn ô — ngôn ngữ của phần chữ, dòng người xem chọn trong menu phụ đề, và default, thứ khiến track này tự mở. Số thứ tự cue của SRT được giữ làm định danh cue.
Tệp WebVTT vào, ra đúng WebVTT đó
Đầu vào
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Kết quả
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Mọi thứ một tệp WebVTT giữ ngoài các cue đều sống sót: lời ghi trên dòng WEBVTT, khối NOTE, khối STYLE quyết định phụ đề trông thế nào trong trình phát, dòng tên của cue, và thiết lập riêng align:start position:10% (dấu %25 trong đó là dấu phần trăm, được mã hóa vì dấu phần trăm trần không được phép trong URI). Tệp vào là WebVTT thì ra đúng WebVTT đó. Hai ô ghi en-GB và English (UK), vì bản này làm cho khán giả Anh — không có gì trong tệp nói vậy.
Phụ đề cho người xem không nghe được
Đầu vào
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Kết quả
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
Tệp đầy hiệu ứng âm thanh và nhạc, đúng thứ kind="captions" — phụ đề cho người xem không nghe được — dùng đến, và ô nhập là nơi duy nhất nói được điều đó. Riêng phần tên menu được gõ là Tom & "the boss" và ra thành Tom & "the boss": một dấu nháy không thoát sẽ đóng thuộc tính ngay tại đó và biến phần còn lại của tên thành các thuộc tính rác trên phần tử.
Ba ô bị xóa hoặc tắt
Đầu vào
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Kết quả
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Ba ô thay đổi, ba kết quả khác nhau, vì HTML đòi những thứ khác nhau. Tên menu biến mất khỏi phần tử — nó là tùy chọn, bỏ đi là giao quyết định cho trình phát. Ô ngôn ngữ trống vẫn cho ra srclang="en": một track tự nhận là subtitles phải nêu ngôn ngữ, nên không có chuyện ô trống, và giá trị dự phòng hiện rõ trong đầu ra. Công tắc default tắt nên thuộc tính đó cũng biến mất, track này sẽ không tự mở — hướng an toàn khi một trang mang nhiều hơn một track.
Câu hỏi thường gặp
Tôi có còn cần tệp .vtt đặt cạnh trang HTML không?
Không, và đó chính là mục đích của trang. WebVTT được ghi vào thuộc tính src dưới dạng URI data:, nên phần tử tự mang phụ đề của nó. Bạn có thể dán vào một trang, gửi tệp qua email, hay chuyển sang thư mục khác mà phụ đề vẫn hiện. Điều cần lưu ý là cả khối chỉ là một thuộc tính: nếu bạn sao chép thiếu một đoạn của dòng dài đó, URI đã hỏng và track sẽ trống.
Thẻ track có chạy khi tôi mở tệp HTML từ máy tính không?
Có, và đó chính là trường hợp khiến trang nhúng phụ đề vào. Khi trang được mở từ đĩa, trình duyệt từ chối tải một tệp track riêng, nên track trỏ tới film.vtt sẽ không hiện gì — không lỗi nhìn thấy được, chỉ một menu phụ đề trống. URI data: không bị tải, chữ đã nằm trong thuộc tính, nên nó chạy trên desktop y như trên máy chủ.
Vì sao đầu ra dài hơn tệp phụ đề nhiều thế?
Vì mỗi ký tự không phải chữ cái hay chữ số thành ba ký tự trong URI — dấu cách là %20, xuống dòng là %0A. Một tệp 100 kB thành vài trăm kB. Base64 sẽ ngắn hơn, chỉ khoảng một phần ba thay vì gấp đôi, nhưng kết quả là một bức tường ký tự không đọc được; ở dạng mã hóa phần trăm, bạn có thể nhìn vào thuộc tính src và nhận ra chính lời thoại của mình, và với một tệp sắp dán vào trang rồi bảo trì bằng tay thì dung lượng thêm đó xứng đáng.
Vì sao không còn thuộc tính label sau khi tôi xóa ô nhập?
Vì tên menu là tùy chọn trong HTML, và bỏ nó không có nghĩa là “không có tên” — nó có nghĩa trình phát tự quyết hiện gì trong menu phụ đề, thường là ngôn ngữ. Xóa ô vì thế bỏ hẳn thuộc tính chứ không ghi một thuộc tính rỗng, vì label="" sẽ hiện thành một dòng trống trong menu đó. Bạn có thể đặt lại tên bất cứ lúc nào; nó chỉ là chuỗi thuần, không thứ gì khác trên trang phụ thuộc vào nó.
kind="subtitles" và kind="captions" khác nhau ở chỗ nào?
Ở người xem. Subtitles giả định người xem nghe được âm thanh và cần phần chữ được chép ra; captions giả định người xem không nghe được, nên chúng mang thêm thông tin mà khán giả nghe được nhận qua âm thanh — nhạc, tiếng cửa, tiếng điện thoại. Cùng một tệp có thể phục vụ cả hai, và phần chữ y hệt nhau, nên trang không thể biết bạn muốn loại nào. Sau khi dán vào phần tử thì không đổi lại được nữa, hãy chọn loại khán giả của bạn cần.
Trang này bỏ qua những loại track nào?
Ba loại: descriptions, kể lại hình ảnh cho người xem không nhìn thấy; chapters, vốn là điều hướng chứ không phải phụ đề và có trang riêng trên site này; và metadata, không hiện cho ai cả. Cả ba đều không thể được lấp bằng nội dung của một tệp phụ đề, nên đưa ra lựa chọn chỉ khiến bạn dựng một phần tử không hiện gì. Hai loại được đưa ra đúng là hai loại một tệp phụ đề phục vụ được.
Nội dung phụ đề có bị thay đổi khi nhúng vào data URI không?
Phần chữ, mốc thời gian và kiểu hiển thị không đổi, và một tệp WebVTT giữ nguyên khối ghi chú, kiểu, vùng cùng thiết lập riêng của từng cue. Thứ thay đổi là hình thức: các dòng được viết lại theo cú pháp WebVTT mà trình phát đọc, nên dấu phẩy trong 00:00:01,000 của tệp SRT thành dấu chấm. Một byte bị bỏ có chủ ý — ký hiệu mở đầu cho biết tệp là UTF-8, vì URI data: đã tự khai báo encoding và nếu giữ lại thì ba ký tự lạ sẽ hiện ở đầu.