VTTCue

Hàm khởi tạo

VTTCue()

Trả về một đối tượng VTTCue mới bao gồm khoảng thời gian và văn bản đã cho.

Thuộc tính phiên bản

Giao diện này cũng kế thừa các thuộc tính từ TextTrackCue.

VTTCue.region

Một đối tượng VTTRegion mô tả vùng phụ của video mà cue sẽ được vẽ lên, hoặc null nếu chưa được gán.

VTTCue.vertical

Một enum đại diện cho hướng viết của cue.

VTTCue.snapToLines

true nếu thuộc tính VTTCue.line chỉ ra số nguyên số dòng, hoặc false nếu nó đại diện cho phần trăm kích thước video. Mặc định là true.

VTTCue.line

Đại diện cho vị trí dòng của cue. Có thể là chuỗi auto hoặc một số có cách diễn giải phụ thuộc vào giá trị của VTTCue.snapToLines.

VTTCue.lineAlign

Một enum đại diện cho căn chỉnh của VTT cue.

VTTCue.position

Đại diện cho độ thụt lề của cue trong dòng. Có thể là chuỗi auto, một số đại diện cho tỷ lệ phần trăm của VTTCue.region, hoặc kích thước video nếu VTTCue.region là null.

VTTCue.positionAlign

Một enum đại diện cho căn chỉnh của cue. Được dùng để xác định điểm neo của VTTCue.position. Mặc định là auto.

VTTCue.size

Đại diện cho kích thước của cue theo phần trăm kích thước video.

VTTCue.align

Một enum đại diện cho căn chỉnh của tất cả các dòng văn bản trong hộp cue.

VTTCue.text

Một chuỗi đại diện cho nội dung của cue.

Phương thức phiên bản

getCueAsHTML()

Trả về văn bản cue dưới dạng DocumentFragment.

Ví dụ

HTML

Ví dụ sau thêm một TextTrack mới vào video, rồi thêm các cue bằng phương thức TextTrack.addCue(), với đối tượng VTTCue là giá trị.

<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ả

Thông số kỹ thuật

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