VTTCue - 描述并控制与特定 <track> 元素关联的文本轨道

VTTCue 是接口是用于处理 WebVTT（媒体演示中的文本轨道）的 API 的一部分，它描述并控制与特定 <track> 元素关联的文本轨道。

构造函数

VTTCue(startTime, endTime, text)

返回一个新创建的 VTTCue 对象，该对象包含给定的时间范围和文本。

参数

startTime

以以秒为单位的时间，它描述了要应用提示的媒体数据范围的开始时间。

endTime

以以秒为单位的时间，它描述了要应用提示的媒体数据范围的结束时间。

text

提示的原始文本及其解释规则。

属性

该接口还从 TextTrackCue 继承了属性。

VTTCue.region

一个 VTTRegion 对象，该对象描述了要在其上绘制提示的视频子区域，如果未分配，则为 null。

VTTCue.vertical

返回一个枚举值，表示提示编写的方向。

VTTCue.snapToLines

如果 VTTCue.line 属性是行的整数或视频尺寸的百分比，则返回 true。

VTTCue.line

返回提示的行位置。 它可以是字符串 auto 或数字，其解释取决于 VTTCue.snapToLines 的值。

VTTCue.lineAlign

返回一个枚举值，表示 VTTCue.line 的对齐方式。

VTTCue.position

返回行中提示的缩进。 它可以是字符串 auto 或表示 VTTCue.region 的百分比的数字，如果 VTTCue.region 为 null，也可以是视频大小。

VTTCue.positionAlign

返回一个枚举值，表示提示的对齐值。它用于确定 VTTCue.position 的锚定对象。 默认为 auto。

VTTCue.size

返回一个 double，表示提示的大小（占视频大小的百分比）。

VTTCue.textAlign

返回一个枚举值，表示提示框中所有文本行的对齐方式。

VTTCue.text

返回一个 DOMString，表示 提示的内容。

方法

getCueAsHTML()

以 DocumentFragment 的形式返回提示文本。

实例

<style>
video {
  width: 320px;
  height: 180px;
}
</style>

<video controls src="/examples/movie.mp4"></video>

<script>
let video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
  const track = video.addTextTrack("captions", "简体中文Subtitles", "zh_CN");
  track.mode = "showing";

  const cueCn = new VTTCue(0, 2.500, '字幕会在0至2.5秒间显示');
  track.addCue(cueCn);

  const cueEn = new VTTCue(2.6, 4, 'Subtitles will display between 2.6 and 4 seconds');
  track.addCue(cueEn);
});
</script>

尝试一下 »

规范

规范	状态	备注
WebVTT: The Web Video Text Tracks Format	候选推荐	-

桌面浏览器兼容性

移动浏览器兼容性