blob: 5377a7a228b8058559df0a7a1165ed5bc4725049 (
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
|
---
title: VTTRegion
slug: Web/API/VTTRegion
tags:
- API
- VTTRegion
- WebVTT
translation_of: Web/API/VTTRegion
---
<p>{{APIRef("WebVTT")}}</p>
<p><span class="seoSummary">WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部である <code>VTTRegion</code> インターフェイスは、{{domxref("VTTCue")}} をレンダリングするための動画の一部を記述します。</span></p>
<h2 id="Constructor" name="Constructor">コンストラクタ</h2>
<dl>
<dt>{{domxref("VTTRegion.VTTRegion", "VTTRegion()")}}</dt>
<dd>新しく作成された <code>VTTRegion</code> オブジェクトを返します。</dd>
</dl>
<h2 id="Properties" name="Properties">プロパティ</h2>
<dl id="property_definitions">
<dt>{{domxref("VTTRegion.id")}}</dt>
<dd>領域を識別する {{domxref("DOMString")}}。</dd>
<dt>{{domxref("VTTRegion.width")}}</dt>
<dd>領域の幅を動画のパーセントとして表す <code>double</code> 型。</dd>
<dt>{{domxref("VTTRegion.lines")}}</dt>
<dd>領域の高さを行数で表す <code>double</code> 型。</dd>
<dt>{{domxref("VTTRegion.regionAnchorX")}}</dt>
<dd>領域アンカーの X オフセットを領域のパーセントとして表す <code>double</code> 型。</dd>
<dt>{{domxref("VTTRegion.regionAnchorY")}}</dt>
<dd>領域アンカーの Y オフセットを領域のパーセントとして表す <code>double</code> 型。</dd>
<dt>{{domxref("VTTRegion.viewportAnchorX")}}</dt>
<dd>ビューポートアンカーの X オフセットを動画のパーセントとして表す <code>double</code> 型。</dd>
<dt>{{domxref("VTTRegion.viewportAnchorY")}}</dt>
<dd>ビューポートアンカーの Y オフセットを動画のパーセントとして表す <code>double</code> 型。</dd>
<dt>{{domxref("VTTRegion.scroll")}}</dt>
<dd>新しいキューを追加すると既存のキューがどのように移動するかを表す列挙型。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush: js">var region = new VTTRegion();
region.width = 50; // 動画幅の50%を使用し、
region.lines = 4; // 高さは4行を使用します。
region.viewportAnchorX = 25; // 領域が左から25%で始まるようにします。
var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
cue.region = region; // このキューはこの領域内にのみ描かれます。</pre>
<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.VTTRegion")}}</p>
|
