VTTCue

基线广泛可用

此功能已成熟稳定，可在多种设备和浏览器版本上运行。它自 2015 年 7 月.

反馈意见

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
一个枚举，表示 VTTCue.line 的对齐方式。: VTTCue.position
表示提示在行内的缩进。这可以是字符串 auto，表示 VTTCue.region 百分比的数字，或者如果 VTTCue.region 为 null，则表示视频大小。: VTTCue.positionAlign
一个枚举，表示提示的对齐方式。它用于确定 VTTCue.position 的锚点。默认值为 auto。: VTTCue.size
表示提示的大小，为视频大小的百分比。: VTTCue.align
一个枚举，表示提示框中所有文本行的对齐方式。: VTTCue.text

实例方法

getCueAsHTML(): 一个字符串，表示提示的内容。

示例

HTML

将提示文本作为 DocumentFragment 返回。

以下示例向视频添加一个新的 TextTrack，然后使用 TextTrack.addCue() 方法添加提示，其中 VTTCue 对象作为值。

<video
  controls
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>

CSS

html

video {
  width: 420px;
  height: 300px;
}

JavaScript

css

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);

js

规范

结果
规范 # WebVTT：网页视频文本轨道格式

浏览器兼容性

the-vttcue-interface