VTTCue
Baseline 廣泛可用 *
VTTCue 介面是 WebVTT API 的一部分，代表一個可以新增到與特定影片（或其他媒體）關聯的文字軌道中的提示。
提示定義了在影片或音訊軌道的特定時間段內顯示的文字，以及諸如大小、對齊和位置等顯示屬性。
建構函式
VTTCue()-
返回一個新建立的
VTTCue物件，該物件覆蓋給定的時間範圍並具有給定的文字。
例項屬性
此介面還繼承了 TextTrackCue 的屬性。
VTTCue.region-
一個
VTTRegion物件，描述了提示將繪製到的影片的子區域，如果未分配任何區域，則為null。 VTTCue.vertical-
一個列舉，表示提示的寫入方向。
VTTCue.snapToLines-
如果
VTTCue.line屬性指示的是整數行數，則為true；如果表示影片尺寸的百分比，則為false。預設值為true。 VTTCue.line-
表示提示的行定位。它可以是字串
auto，也可以是一個數字，其解釋取決於VTTCue.snapToLines的值。 VTTCue.lineAlign-
一個列舉，表示 VTT 提示的對齊方式。
VTTCue.position-
表示提示在行內的縮排。它可以是字串
auto，一個表示VTTCue.region百分比的數字，或者如果VTTCue.region為null，則表示影片尺寸的百分比。 VTTCue.positionAlign-
一個列舉，表示提示的對齊方式。這用於確定
VTTCue.position的錨定點。預設值為auto。 VTTCue.size-
表示提示的大小，以影片尺寸的百分比表示。
VTTCue.align-
一個列舉，表示提示框內所有文字行的對齊方式。
VTTCue.text-
一個字串，表示提示的內容。
例項方法
getCueAsHTML()-
以
DocumentFragment的形式返回提示文字。
示例
HTML
下面的示例將一個新的 TextTrack 新增到影片中，然後使用 TextTrack.addCue() 方法新增提示，值為 VTTCue 物件。
html
<video controls src="/shared-assets/videos/friday.mp4"></video>
CSS
css
video {
width: 420px;
height: 300px;
}
JavaScript
js
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);
結果
規範
| 規範 |
|---|
| WebVTT：網頁影片文字軌道格式 # the-vttcue-interface |
瀏覽器相容性
載入中…