WebVTT API

Khái niệm và cách sử dụng

Text track là vùng chứa cho dữ liệu văn bản căn chỉnh theo thời gian có thể được phát song song với track video hoặc âm thanh để cung cấp bản dịch, phiên âm hoặc tổng quan về nội dung. Một phần tử phương tiện video hoặc âm thanh có thể định nghĩa các track của nhiều loại khác nhau hoặc bằng các ngôn ngữ khác nhau, cho phép người dùng hiển thị các track phù hợp dựa trên sở thích hoặc nhu cầu của họ.

Các loại dữ liệu văn bản khác nhau có thể được chỉ định là captions, descriptions, chapters, subtitles hoặc metadata; tài liệu <track> có thêm thông tin về ý nghĩa của chúng. Lưu ý rằng các trình duyệt không nhất thiết hỗ trợ tất cả các loại text track.

Các đơn vị dữ liệu văn bản căn chỉnh theo thời gian riêng lẻ trong một track được gọi là "cue". Mỗi cue có thời gian bắt đầu, thời gian kết thúc và nội dung văn bản. Nó cũng có thể có "cue settings", ảnh hưởng đến vùng hiển thị, vị trí, căn chỉnh và/hoặc kích thước của nó. Cuối cùng, một cue có thể có nhãn, có thể được sử dụng để chọn nó để tạo kiểu CSS.

Text track và cue có thể được định nghĩa trong tệp bằng cách sử dụng WebVTT File Format, và sau đó được liên kết với phần tử <video> cụ thể bằng cách sử dụng phần tử <track>.

Ngoài ra, bạn có thể thêm TextTrack vào phần tử phương tiện trong JavaScript bằng cách sử dụng HTMLMediaElement.addTextTrack(), và sau đó thêm các đối tượng VTTCue riêng lẻ vào track với TextTrack.addCue().

Phần tử giả CSS ::cue có thể được sử dụng trong cả HTML và tệp WebVTT để tạo kiểu các cue cho phần tử cụ thể.

Giao diện

VTTCue

Đại diện cho một cue, văn bản được hiển thị trong khoảng thời gian cụ thể của text track liên kết với phần tử phương tiện.

VTTRegion

Đại diện cho một phần của phần tử video mà VTTCue có thể được hiển thị lên.

TextTrack

Đại diện cho text track, giữ danh sách các cue để hiển thị cùng với phần tử phương tiện liên quan tại các điểm khác nhau trong khi nó phát.

TextTrackCue

Lớp cơ sở trừu tượng cho các loại cue khác nhau, chẳng hạn như VTTCue.

TextTrackCueList

Đối tượng giống mảng đại diện cho danh sách cập nhật động của các đối tượng TextTrackCue. Một phiên bản của loại này được lấy từ TextTrack.cues để lấy tất cả các cue trong đối tượng TextTrack.

TextTrackList

Đại diện cho danh sách các text track được định nghĩa cho phần tử phương tiện, với mỗi track được đại diện bởi một phiên bản TextTrack riêng biệt trong danh sách.

Giao diện liên quan

DataCue

Đại diện cho cue để liên kết dữ liệu tùy ý có thời gian (thay vì văn bản) với tài nguyên phương tiện.

TrackEvent

Là một phần của HTML DOM API, đây là giao diện cho các sự kiện addtrack và removetrack được kích hoạt khi track được thêm vào hoặc xóa khỏi TextTrackList.

Phần mở rộng CSS liên quan

::cue

Khớp với các cue trong phần tử được chọn trong phương tiện có track VTT.

Ví dụ

Sử dụng WebVTT API để thêm chú thích

HTML

<video controls src="/shared-assets/videos/friday.mp4"></video>

CSS

video {
  width: 420px;
  height: 300px;
}

JavaScript

let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
console.log(track.cues);

Kết quả

Hiển thị nội dung VTT được định nghĩa trong tệp

Ví dụ này cho thấy cách thêm cùng một bộ chú thích vào video bằng cách sử dụng phần tử <track>.

Đầu tiên, hãy định nghĩa chú thích trong tệp "captions.vtt":

WEBVTT

00:00.000 --> 00:00.900
Hildy!

00:01.000 --> 00:01.400
How are you?

00:01.500 --> 00:02.900
Tell me, is the lord of the universe in?

00:03.000 --> 00:04.200
Yes, he's in - in a bad humor

00:04.300 --> 00:06.000
Somebody must've stolen the crown jewels

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" srclang="vi" />
</video>

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" srclang="vi" />
  <track kind="subtitles" src="subtitles.vtt" srclang="vi" />
  <track kind="descriptions" src="descriptions.vtt" srclang="vi" />
  <track kind="chapters" src="chapters_de.vtt" srclang="de" />
  <track kind="subtitles" src="subtitles_en.vtt" srclang="vi" />
</video>

Tạo kiểu WebVTT trong HTML hoặc stylesheet

Bạn có thể tạo kiểu các cue WebVTT bằng cách khớp các phần tử sử dụng phần tử giả ::cue.

video {
  width: 420px;
  height: 300px;
}

<video controls src="/shared-assets/videos/friday.mp4"></video>

video::cue {
  font-size: 1.5rem;
  background-image: linear-gradient(to bottom, yellow, lightyellow);
  color: red;
}

video::cue(u) {
  color: green;
}

video::cue(b) {
  color: purple;
}

let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(
  new VTTCue(1.5, 2.9, "Tell me, is the <u>lord of the universe</u> in?"),
);
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(
  new VTTCue(4.3, 6, "Somebody must've <b>stolen</b> the crown jewels"),
);
console.log(track.cues);

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

api.VTTCue

api.TextTrack

api.VTTRegion

Xem thêm

• Các phần tử giả CSS ::cue và ::cue()