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 |
浏览器兼容性
加载中…