Luet tämän sisällön englanninkielistä versiota, koska tälle sisällölle ei ole vielä käännöstä. Auta meitä kääntämään tämä artikkeli!
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
VTTCue | Chrome Full support Yes | Edge ? | Firefox Full support 26 | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
VTTCue() constructor | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android ? |
align | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
getCueAsHTML | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
line | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
lineAlign | Chrome No support No | Edge ? | Firefox Full support Yes | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android Full support Yes | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
position | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
positionAlign | Chrome No support No | Edge ? | Firefox Full support Yes | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android Full support Yes | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
region | Chrome No support No | Edge ? | Firefox Full support Yes | IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android Full support Yes | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
size | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
snapToLines | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
text | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
vertical | Chrome Full support Yes | Edge ? | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown