---
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>