当前位置：文江博客知识库 en-US 文档 Web API VTTCue

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, or null 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 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: 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);
});