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 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 video của bạn dễ tiếp cận hơn.
Thêm thẻ <track>
Để thêm phụ đề hoặc nội dung mô tả cho trình đọc màn hình vào video trên web, hãy thêm thẻ <track>
vào thẻ <video>
. Ngoài chú thích và nội dung mô tả trình đọc màn hình, thẻ <track>
cũng có thể được dùng 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 xác định một bản nhạc cụ thể trong giao diện.
Để cung cấp các bản lồng tiếng cho nhiều ngôn ngữ, hãy thêm một thẻ <track>
riêng cho mỗi tệp WebVTT mà bạn cung cấp và cho biết ngôn ngữ bằng cách sử dụng thuộc tính 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 tín hiệu là một khối văn bản hiển thị trên màn hình và phạm vi thời gian hiển thị khối văn bản đó.
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 bản nhạc là một cue (tín hiệu). 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, 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 tín hiệu đượ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 của tín hiệu ở định dạng hours:minutes:seconds.milliseconds
. Quy trình phân tích cú pháp nghiêm ngặt.
Tức là các số phải được thêm số 0 vào nếu cần: giờ, phút và giây phải có hai chữ số (00 đối với giá trị bằng 0) và mili giây phải có ba chữ số (000 đối với giá trị bằng 0). 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. Trình xác thực này kiểm tra lỗi đị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, mặc dù có nhiều dịch vụ tạo tệp này 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 chế độ căn chỉnh trái hoặc phải thì sao? Có thể là để căn chỉnh phụ đề với vị trí người nói hiện tại hoặc để không che khuất 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 chế độ cài đặt khác ngay trong tệp .vtt
. Hãy lưu ý cách xác định vị trí phụ đề bằng cách thêm các chế độ 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 hữu ích khác là khả năng tạo kiểu cho các tín hiệu bằng CSS. Có thể bạn muốn sử dụng hiệu ứng chuyển màu 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ả chú thích 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 lời nhắc, quy cách WebVTT là một nguồn tài liệu phù hợp 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. 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 bất kỳ âm thanh nào. Phù hợp với người khiếm thính và trong trường hợp video đang phát ở chế độ 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 bằng 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ể được các tập lệnh sử dụng.
Giờ đây, khi đã nắm được kiến thức cơ bản về cách cung cấp và truy cập vào 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. Hãy tìm hiểu về Khung nội dung nghe nhìn và cách dùng khung này để thêm video vào trang web và cung cấp các tính năng nâng cao.