VTTCue
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()
-
Returns a newly created
VTTCue
object that covers the given time range and has the given text.
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.align
-
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
The following example adds a new TextTrack
to the video, then adds cues using the TextTrack.addCue()
method, with a VTTCue
object as the value.
<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>
CSS
video {
width: 420px;
height: 300px;
}
JavaScript
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);
Result
Specifications
Specification |
---|
WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |
Browser compatibility
BCD tables only load in the browser