Hỗ trợ tiếp cận nội dung đa phương tiện

Derek Herman
Derek Herman
Joe Medley
Joe Medley

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 (Web Video Text Tracks) được dùng để mô tả dữ liệu văn bản theo thời gian, chẳng hạn như phụ đề hoặc chú thích để 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.

Ảnh chụp màn hình cho thấy phụ đề hiển thị bằng phần tử kênh trong Chrome trên Android.

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 ví dụ về thẻ <video> có hai 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à một tệp văn bản chứa một loạt chú thích. 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ó 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ư railroadmanuscript. 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, vì 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 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.v. trực tiếp bên 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: Đối với phụ đề từ bản chép lời và có thể là bản dịch của âm thanh bất kỳ. 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 các kiến thức cơ bản về cách cung cấp và truy cập video trên trang web, 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.