VTTCue - Web APIs 编辑
The
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>
element.Constructor
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.
Properties
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, ornull
if none is assigned. VTTCue.vertical
- Returns an enum representing the cue writing direction.
VTTCue.snapToLines
- Returns true if the
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 ofVTTCue.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 theVTTCue.region
, or the video size ifVTTCue.region
isnull
. 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 isauto
. VTTCue.size
- Returns a
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
- Returns a
DOMString
with the contents of the cue.
Methods
getCueAsHTML()
- Returns the cue text as a
DocumentFragment
.
Example
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);
});
Result
Chrome: Please Open in JSFiddle to view the live sample. Embed live sample can not show subtitles in Chrome.
Specifications
Specification | Status | Comment |
---|---|---|
WebVTT: The Web Video Text Tracks Format | Candidate Recommendation |
Browser compatibility
BCD tables only load in the browser
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论