blob: 51281adab8e0fc54ed97d6a4966284d117377246 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
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>
|
