WebVTT(メディアプレゼンテーションに関するテキストトラック)を処理するための API の一部である VTTCue インターフェイスは、特定の <track> 要素に関連付けられたテキストトラックを記述および制御します。

コンストラクタ

VTTCue(startTime, endTime, text)
指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された VTTCue オブジェクトを返します。

プロパティ

このインターフェイスは TextTrackCue からもプロパティを継承しています。

VTTCue.region
キューが描画される動画のサブ領域を説明する VTTRegion オブジェクト。 割り当てられていない場合は null
VTTCue.vertical
キューの書き込み方向を表す列挙型を返します。
VTTCue.snapToLines
VTTCue.line 属性が整数の行数または動画サイズのパーセントである場合、true を返します。
VTTCue.line
キューの行位置を返します。 これは、文字列 auto またはその解釈が VTTCue.snapToLines の値に依存する数値になります。
VTTCue.lineAlign
VTTCue.line の配置を表す列挙型を返します。
VTTCue.position
行内のキューのインデントを返します。 これは、文字列 auto または VTTCue.region のパーセントを表す数値、または VTTCue.regionnull の場合は動画サイズです。
VTTCue.positionAlign
キューの配置を表す列挙型を返します。 これは VTTCue.position が何に固定されているかを決定するために使用されます。
VTTCue.size
キューのサイズを表す double 型を動画サイズのパーセントで返します。
VTTCue.textAlign
キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。
VTTCue.text
キューの内容を含む DOMString を返します。

メソッド

VTTCue.getCueAsHTML
キューのテキストを DocumentFragment として返します。

var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
var tracks = document.querySelector('video').textTracks;
tracks[0].addCue(cue);

新しいキューを作成したら、それを TextTrack に追加する必要があります。 追加すると、このキューを2秒から3秒の間に描画し、「かっこいい文章を表示する」というテキストを表示します。

仕様

仕様 状態 コメント
WebVTT: The Web Video Text Tracks Format 勧告候補  

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
VTTCueChrome 完全対応 ありEdge ? Firefox 完全対応 26IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
VTTCue() constructorChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android ?
alignChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
getCueAsHTMLChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
lineChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
lineAlignChrome 未対応 なしEdge ? Firefox 完全対応 ありIE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
positionChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
positionAlignChrome 未対応 なしEdge ? Firefox 完全対応 ありIE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
regionChrome 未対応 なしEdge ? Firefox 完全対応 ありIE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
sizeChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
snapToLinesChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
textChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
verticalChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,