VTTCue


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 )
Returns a newly created 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
A 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.

规范

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

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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
position 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

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知