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