Trong bài viết này, bạn sẽ tìm hiểu về định dạng WebVTT (Video văn bản trên web), được dùng để mô tả dữ liệu văn bản theo thời gian, chẳng hạn như phụ đề, nhằm giúp khán giả dễ tiếp cận video hơn.
Hỗ trợ tiếp cận không giống như một chiếc bánh nhỏ. Không bao giờ bạn đưa bất kỳ thứ gì vào danh sách tồn đọng với hy vọng giới thiệu sau này. Phụ đề và nội dung mô tả của trình đọc màn hình là cách duy nhất để nhiều người dùng có thể trải nghiệm video của bạn. Trong một số khu vực tài phán, thậm chí video còn phải bắt buộc theo yêu cầu của pháp luật hoặc quy định.
Thêm thẻ <track>
Để thêm phụ đề hoặc nội dung mô tả của trình đọc màn hình vào video trên web, hãy thêm một thẻ <track> trong thẻ <video>. Ngoài phụ đề và nội dung mô tả của trình đọc màn hình, bạn cũng có thể dùng các thẻ <track> cho phụ đề và tiêu đề của chương.
Thẻ <track> cũng có thể giúp công cụ tìm kiếm hiểu được nội dung trong video.
Tuy nhiên, những chức năng đó không thuộc phạm vi của bài viết này.
Thẻ <track> tương tự như phần tử <source> vì cả hai đều có thuộc tính src trỏ đến nội dung được tham chiếu. Đối với thẻ <track>, thẻ này sẽ trỏ đến tệp WebVTT. Thuộc tính label chỉ định cách xác định một bản nhạc cụ thể trong giao diện.
Để cung cấp các bản nhạc cho nhiều ngôn ngữ, hãy thêm một thẻ <track> riêng cho từng tệp WebVTT mà bạn đang cung cấp và chỉ ra ngôn ngữ bằng thuộc tính srclang.
Dưới đây là một ví dụ về thẻ <video> có 2 thẻ <track>. Ngoài ra, bạn có thể xem trên Glitch (nguồn) mẫu.
Thêm một phần tử <track> làm phần tử con của phần tử <video>:
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Cấu trúc tệp WebVTT
Dưới đây là một tệp WebVTT giả định cho bản minh hoạ được liên kết ở trên. Tệp này là một tệp văn bản chứa một loạt lời nhắc. Mỗi tín hiệu là một khối văn bản cần hiển thị trên màn hình và khoảng thời gian mà văn bản đó sẽ hiển thị.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Mỗi mục trong tệp theo dõi được gọi là một chỉ dẫn. Mỗi tín hiệu có thời gian bắt đầu và thời gian kết thúc được phân tách bằng một mũi tên, với văn bản tín hiệu trong dòng bên dưới. Tín hiệu gợi ý cũng có thể có các mã nhận dạng như railroad và manuscript trong ví dụ bên dưới.
Các gợi ý được phân tách bằng một dòng trống.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Thời gian gợi ý đang ở định dạng hours:minutes:seconds.milliseconds. Quá trình phân tích cú pháp rất nghiêm ngặt.
Tức là nếu cần, số phải có khoảng đệm 0 nếu cần: giờ, phút và giây phải có 2 chữ số (00 cho giá trị 0) và mili giây phải có 3 chữ số (000 cho giá trị 0). Trình xác thực WebVTT hoạt động có một trình xác thực WebVTT vô cùng tuyệt vời. Trình xác thực này sẽ kiểm tra các lỗi về định dạng thời gian và các vấn đề như thời gian không tuần tự.
Bạn có thể tạo tệp VTT theo cách thủ công, vì có nhiều dịch vụ sẽ tạo các tệp này cho bạn.
Như bạn có thể thấy trong các ví dụ trước của chúng tôi, định dạng WebVTT khá đơn giản. Chỉ cần thêm dữ liệu văn bản cùng với dấu thời gian.
Tuy nhiên, nếu bạn muốn phụ đề hiển thị ở một vị trí khác theo căn chỉnh trái hoặc phải thì sao? Có thể là để căn chỉnh phụ đề cho phù hợp với vị trí của người nói hiện tại hoặc để tránh văn bản xuất hiện trước ống kính. WebVTT xác định các chế độ cài đặt để thực hiện việc đó,
và các chế độ khác, ngay bên trong
tệp .vtt. Lưu ý cách xác định vị trí phụ đề bằng cách thêm các chế độ cài đặt sau các khoảng thời gian xác định.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Một tính năng tiện lợi khác là khả năng tạo kiểu cho gợi ý bằng CSS. Có thể bạn muốn sử dụng độ dốc tuyến tính màu xám làm nền, với màu nền trước là papayawhip cho tất cả phụ đề và tất cả văn bản in đậm có màu peachpuff.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Nếu bạn muốn tìm hiểu thêm về cách tạo kiểu và gắn thẻ cho từng tín hiệu, thì thông số kỹ thuật WebVTT là một nguồn hữu ích để xem các ví dụ nâng cao.
Các loại bản nhạc văn bản
Bạn có thấy thuộc tính kind của phần tử <track> không? Thuộc tính này dùng để cho biết mối quan hệ giữa bản văn bản cụ thể với video. Các giá trị có thể có của thuộc tính kind là:
captions: Dành cho phụ đề từ bản chép lời và có thể là bản dịch của mọi âm thanh. Phù hợp với người khiếm thính và trong trường hợp video đang phát tắt tiếng.subtitles: Đối với phụ đề, tức là bản dịch lời nói và văn bản ở ngôn ngữ khác với ngôn ngữ chính của video.descriptions: Dành cho phần mô tả các phần hình ảnh trong nội dung video. Phù hợp với người khiếm thị.chapters: Được hiển thị khi người dùng đang di chuyển trong video.metadata: Không hiển thị và có thể được tập lệnh sử dụng.
Giờ đây, khi đã nắm được các thông tin cơ bản về cách cung cấp và truy cập video trên trang web, có thể bạn sẽ thắc mắc về các trường hợp sử dụng phức tạp hơn. Tiếp theo, bạn sẽ tìm hiểu về Khung nội dung nghe nhìn và cách hệ thống này có thể giúp bạn thêm video vào trang web mà vẫn cung cấp các tính năng nâng cao.