VTTCue


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 完全対応 ≤79Firefox 完全対応 26IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
VTTCue() constructorChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
alignChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
getCueAsHTMLChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lineChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 あり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 完全対応 ≤79Firefox 完全対応 あり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 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
snapToLinesChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
textChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
verticalChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

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