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 như phụ đề nhằm giúp khán giả dễ tiếp cận video hơn.
Khả năng hỗ trợ tiếp cận không giống như phủ lên chiếc bánh. Đó không phải là bất cứ thứ gì bạn mặc tồn đọng với hy vọng được giới thiệu trong tương lai. Phụ đề và trình đọc màn hình mô tả là cách duy nhất để nhiều người dùng trải nghiệm video của bạn và trong một số khu vực tài phán, thậm chí còn được luật pháp hoặc quy định yêu cầu.
Thêm <track> thẻ
Để thêm phụ đề hoặc nội dung mô tả về trình đọc màn hình vào video trên web, hãy thêm <track>
trong thẻ <video>. Ngoài phụ đề và trình đọc màn hình
bạn cũng có thể dùng thẻ <track> cho phụ đề và tiêu đề chương.
Thẻ <track> cũng có thể giúp các công cụ tìm kiếm hiểu được nội dung trong video.
Tuy nhiên, các khả năng đó nằm ngoài phạm vi của bài viết này.
Thẻ <track> tương tự như phần tử <source> ở chỗ cả hai đều có src
trỏ đến nội dung được tham chiếu. Đối với thẻ <track>, thẻ này trỏ đến một
Tệp WebVTT. Thuộc tính label chỉ định cách một bản nhạc cụ thể sẽ
được xác định trong giao diện.
Để cung cấp các kênh cho nhiều ngôn ngữ, hãy thêm một thẻ <track> riêng cho từng ngôn ngữ
WebVTT bạn đang cung cấp và cho biết ngôn ngữ bằng srclang
.
Dưới đây là ví dụ về một thẻ <video> có hai thẻ <track>. Ngoài ra còn có
mẫu mà bạn có thể xem trên Glitch (nguồn).
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à tệp WebVTT giả định cho bản minh hoạ được liên kết ở trên. Tệp này là tệp văn bản chứa một loạt lời nhắc. Mỗi lời nhắc 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 hiển thị ảnh.
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 cue. Mỗi tín hiệu có một 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 gợi ý trong dòng bên dưới. Lời nhắc có thể
cũng có các mã nhận dạng như railroad và manuscript trong ví dụ bên dưới (không bắt buộc).
Các lời nhắc đượ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 báo cáo có định dạng hours:minutes:seconds.milliseconds. Việc phân tích cú pháp rất nghiêm ngặt.
Nghĩa là, các số phải được đệm bằng 0 nếu cần: giờ, phút và giây
phải có hai chữ số (00 cho giá trị không) và mili giây phải có ba
chữ số (000 cho giá trị không). Có một trình xác thực WebVTT tuyệt vời tại
Trình xác thực WebVTT trực tiếp, giúp kiểm tra lỗi trong quá trình đị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 ứng dụng đó cho bạn.
Như bạn có thể thấy trong các ví dụ trước, định dạng WebVTT khá đơn giản. Bạ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 với
căn trái hay phải? Phụ đề cần chỉnh cho khớp với người đang nói
hoặc để tránh văn bản trong máy ảnh. WebVTT xác định các chế độ cài đặt để thực hiện việc đó,
và nhiều dịch vụ khác, ngay bên trong
Tệp .vtt. Ghi lại cách xác định vị trí phụ đề bằng cách thêm
các cài đặt sau định nghĩa khoảng thời gian.
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 tín hiệu bằng CSS. Có thể bạn muốn
để sử dụng dải chuyển tiếp 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 tô 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 người Thông số kỹ thuật WebVTT là một nguồn tốt cho các ví dụ nâng cao.
Các loại đoạn văn bản
Bạn có để ý thấy thuộc tính kind của phần tử <track> không? Dùng để
cho biết mối liên hệ giữa đoạn văn bản cụ thể đó với video. Chiến lược phát hành đĩa đơn
có thể có các giá trị sau đây của thuộc tính kind:
captions: Đối với phụ đề từ bản chép lời và có thể là bản dịch của bất kỳ âm thanh nào. Phù hợp với người khiếm thính và trong trường hợp đang xem video đang phát bị tắt tiếng.subtitles: Đối với phụ đề, bản dịch lời nói và văn bản trong 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: Nhằm hiển thị khi người dùng đang điều hướng trong video.metadata: Không hiển thị và có thể bị tập lệnh sử dụng.
Giờ bạn đã hiểu những kiến thức cơ bản về cách cung cấp và truy cập vào một video trên trang web của mình, bạn có thể 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ẽ quan tâm đến khung nội dung đa phương tiện và cách họ có thể giúp bạn bổ sung video lên trang web của mình, đồng thời cung cấp các tính năng nâng cao.