Ngày xuất bản: 20 tháng 8 năm 2020
Phụ đề và nội dung mô tả dành cho trình đọc màn hình là cách duy nhất để nhiều người dùng có thể thưởng thức video của bạn. Ở một số khu vực tài phán, phụ đề và nội dung mô tả dành cho trình đọc màn hình thậm chí còn là yêu cầu bắt buộc theo luật hoặc quy định. Định dạng WebVTT (Video văn bản trên web) được sử dụng để mô tả dữ liệu văn bản có dấu thời gian, chẳng hạn như phụ đề, để giúp video của bạn trở nên hấp dẫn hơn dễ sử dụng.
Thêm thẻ <track>
Để 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à nội dung mô tả cho trình đọc màn hình, bạn cũng có thể sử dụng thẻ <track> cho phụ đề và tiêu đề chương.
Thẻ <track> tương tự như phần tử <source> ở chỗ 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 trỏ đến một
Tệp WebVTT.
Thuộc tính label chỉ định cách có thể
đượ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
.
Hãy xem thẻ <video> mẫu này có 2 thẻ <track>.
Thêm 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>
Ngoài ra, bạn cũng có thể xem một mẫu trên Glitch.
Cấu trúc tệp WebVTT
Dưới đây là tệp WebVTT giả định cho bản minh hoạ. Đây là tệp văn bản chứa một loạt các tín hiệu. 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ị quảng cáo.
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 là một dấu hiệu. 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, theo sau là văn bản tín hiệu. Tín hiệu cũng có thể có mã nhận dạng, chẳng hạn như railroad và manuscript. 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ụ 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 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 kênh văn bản
Bạn có nhận 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 một bả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 các trường hợp khi 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ùng để 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: Dùng để hiển thị khi người dùng đang di chuyển 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. Tìm hiểu về Khung nội dung đa phương tiện và cách các khung này có thể giúp bạn thêm video vào trang web, đồng thời cung cấp các tính năng nâng cao.