---
title: VTTCue
slug: Web/API/VTTCue
tags:
- VTTCue
- WebVTT
- text track
- vtt
translation_of: Web/API/VTTCue
---
{{APIRef("WebVTT")}}
WebVTT(メディアプレゼンテーションに関するテキストトラック)を処理するための API の一部である VTTCue
インターフェイスは、特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。
コンストラクタ
- {{domxref("VTTCue.VTTCue", "VTTCue(startTime, endTime, text)")}}
- 指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された
VTTCue
オブジェクトを返します。
プロパティ
このインターフェイスは {{domxref("TextTrackCue")}} からもプロパティを継承しています。
- {{domxref("VTTCue.region")}}
- キューが描画される動画のサブ領域を説明する {{domxref("VTTRegion")}} オブジェクト。 割り当てられていない場合は
null
。
- {{domxref("VTTCue.vertical")}}
- キューの書き込み方向を表す列挙型を返します。
- {{domxref("VTTCue.snapToLines")}}
- {{domxref("VTTCue.line")}} 属性が整数の行数または動画サイズのパーセントである場合、
true
を返します。
- {{domxref("VTTCue.line")}}
- キューの行位置を返します。 これは、文字列
auto
またはその解釈が {{domxref("VTTCue.snapToLines")}} の値に依存する数値になります。
- {{domxref("VTTCue.lineAlign")}}
- {{domxref("VTTCue.line")}} の配置を表す列挙型を返します。
- {{domxref("VTTCue.position")}}
- 行内のキューのインデントを返します。 これは、文字列
auto
または {{domxref("VTTCue.region")}} のパーセントを表す数値、または {{domxref("VTTCue.region")}} が null
の場合は動画サイズです。
- {{domxref("VTTCue.positionAlign")}}
- キューの配置を表す列挙型を返します。 これは {{domxref("VTTCue.position")}} が何に固定されているかを決定するために使用されます。
- {{domxref("VTTCue.size")}}
- キューのサイズを表す
double
型を動画サイズのパーセントで返します。
- {{domxref("VTTCue.textAlign")}}
- キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。
- {{domxref("VTTCue.text")}}
- キューの内容を含む {{domxref("DOMString")}} を返します。
メソッド
- {{domxref("VTTCue.getCueAsHTML")}}
- キューのテキストを {{domxref("DocumentFragment")}} として返します。
例
var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
var tracks = document.querySelector('video').textTracks;
tracks[0].addCue(cue);
新しいキューを作成したら、それを {{domxref("TextTrack")}} に追加する必要があります。 追加すると、このキューを2秒から3秒の間に描画し、「かっこいい文章を表示する
」というテキストを表示します。
仕様
仕様 |
状態 |
コメント |
{{SpecName("WebVTT")}} |
{{Spec2("WebVTT")}} |
|
ブラウザーの互換性
{{Compat("api.VTTCue")}}