VTTCue
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Giao diện VTTCue thuộc WebVTT API đại diện cho một cue có thể được thêm vào track văn bản gắn với một video (hoặc phương tiện khác) cụ thể.
Một cue xác định văn bản cần hiển thị trong một khoảng thời gian nhất định của track video hoặc audio, cùng với các thuộc tính hiển thị như kích thước, căn chỉnh và vị trí.
Hàm khởi tạo
VTTCue()-
Trả về một đối tượng
VTTCuemớ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
VTTRegionmô tả vùng phụ của video mà cue sẽ được vẽ lên, hoặcnullnếu chưa được gán. VTTCue.vertical-
Một enum đại diện cho hướng viết của cue.
VTTCue.snapToLines-
truenếu thuộc tínhVTTCue.linechỉ ra số nguyên số dòng, hoặcfalsenế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
autohoặc một số có cách diễn giải phụ thuộc vào giá trị củaVTTCue.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ủaVTTCue.region, hoặc kích thước video nếuVTTCue.regionlà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
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |