HTML next - HTML5 in Action - page 552

Listing I.12. Display the active cue

As you might guess from listing I.12 , the cue objects have their own API. Each cue is of
type TextTrackCue ; a complete list of properties is shown in table I.4 .

Table I.4. The TextTrackCue API

Attribute/method Type Description

track TextTrack The track to which this cue belongs.

id string Unique identifier for the cue.

startTime double The time the cue starts.

endTime double The time the cue ends.

pauseOnExit boolean Returns true if the media will pause at the end of the cue.

Returns a string describing the TextTrack writing direction. Either empty (hori-
zontal), "rl" for vertical growing left, or "lr" for vertical growing right.

vertical string

Returns true if the cue is set to render at a point that's a multiple of the height
of the starting line plus the starting point or false if its position is a point at a
percentage of the overall size of the video.

snapToLines boolean

Returns a number giving the position of the line or "auto" if there are multiple
cues.

line long (or "auto")

A number giving the position of the text of the cue within each line, to be inter-
preted as a percentage of the video

position long

A number giving the size of the box within which the text of each line of the
cue is to be aligned, to be interpreted as a percentage of the video.
align string "start", "middle", "end", "left", or "right".
text string The text of the cue.
getCueAsHTML() DocumentFragment Returns the text of the cue as HTML.

size long

There's a working version of this code in index-vtt-4.html in the code download in case
you don't want to piece it together from the snippets here. If you load it, play the video and
click the Descriptions button a few times; you should see the descriptions appear below the
video. But you'll also probably see the odd error message like that shown in figure I.7 .