在此页

• 构造函数
• 特性
• 方法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

VTTCue interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular <track> 元素。

构造函数

VTTCue( startTime , endTime , text )

返回新近创建的 VTTCue object that covers the given time range and has the given text.

Param

startTime

The time, in seconds and fractions of a second, that describes the beginning of the range of the media data to which the cue applies.

endTime

The time, in seconds and fractions of a second, that describes the end of the range of the media data to which the cue applies.

text

The raw text of the cue, and rules for its interpretation.

特性

This interface also inherits properties from TextTrackCue .

VTTCue.region

VTTRegion object describing the video's sub-region that the cue will be drawn onto, or null if none is assigned.

VTTCue.vertical

Returns an enum representing the cue writing direction.

VTTCue.snapToLines

返回 true 若 VTTCue.line attribute is an integer number of lines or a percentage of the video size.

VTTCue.line

Returns the line positioning of the cue. This can be the string auto or a number whose interpretation depends on the value of VTTCue.snapToLines .

VTTCue.lineAlign

Returns an enum representing the alignment of the VTTCue.line .

VTTCue.position

Returns the indentation of the cue within the line. This can be the string auto or a number representing the percentage of the VTTCue.region , or the video size if VTTCue.region is null .

VTTCue.positionAlign

Returns an enum representing the alignment of the cue. This is used to determine what the VTTCue.position is anchored to. The default is auto .

VTTCue.size

返回 double representing the size of the cue, as a percentage of the video size.

VTTCue.textAlign

Returns an enum representing the alignment of all the lines of text within the cue box.

VTTCue.text

返回 DOMString with the contents of the cue.

方法

getCueAsHTML()

Returns the cue text as a DocumentFragment .

范例

HTML

<video controls src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"></video>
					

CSS

video {
  width: 320px;
  height: 180px;
}
					

JavaScript

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

结果

Chrome: Please Open in JSFiddle to view the live sample. Embed live sample can not show subtitles in Chrome.

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
VTTCue	Chrome Yes	Edge ≤79	Firefox 26	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
VTTCue() 构造函数	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes
align	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
getCueAsHTML	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
line	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
lineAlign	Chrome No	Edge No	Firefox Yes	IE ?	Opera No	Safari ?	WebView Android No	Chrome Android No	Firefox Android Yes	Opera Android No	Safari iOS ?	Samsung Internet Android No
位置	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
positionAlign	Chrome No	Edge No	Firefox Yes	IE ?	Opera No	Safari ?	WebView Android No	Chrome Android No	Firefox Android Yes	Opera Android No	Safari iOS ?	Samsung Internet Android No
region	Chrome No	Edge No	Firefox Yes	IE ?	Opera No	Safari ?	WebView Android No	Chrome Android No	Firefox Android Yes	Opera Android No	Safari iOS ?	Samsung Internet Android No
size	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
snapToLines	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
text	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
vertical	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

元数据

• 最后修改： Nov 25, 2019

相关话题

1. WebVTT API
2. VTTCue
3. 构造函数

   1. VTTCue()
4. 继承：

   1. EventTarget
5. Related pages for WebVTT

   1. TextTrack
   2. TextTrackCue
   3. TextTrackCueList
   4. TextTrackList
   5. TrackEvent
   6. VTTRegion