path: root/files/ja/web/api/webvtt_api/index.html

---
title: Web ビデオテキストトラックフォーマット (WebVTT)
slug: Web/API/WebVTT_API
tags:
  - API
  - Intermediate
  - Media
  - Reference
  - Video
  - Web Video Text Tracks
  - WebVTT
  - captions
  - subtitles
  - text tracks
translation_of: Web/API/WebVTT_API
---
<div>{{DefaultAPISidebar("WebVTT")}}</div>

<p><span class="seoSummary"><strong>Web ビデオテキストトラックフォーマット (WebVTT)</strong> は、{{HTMLElement("track")}} 要素を使用して時間指定のテキストトラック（字幕やキャプションなど）を表示するためのフォーマットです。</span> WebVTT ファイルの主な目的は、テキストオーバーレイを {{HTMLElement("video")}} に追加することです。WebVTT はテキストベースのフォーマットであり、{{Glossary("UTF-8")}} を使用してエンコードする必要があります。スペースを使用できる場所では、タブも使用できます。これらのトラックと、正しい時間にテキストの再生を実行するために必要なデータを表現および管理するために使用できる小さな API もあります。</p>

<h2 id="WebVTT_files" name="WebVTT_files">WebVTT ファイル</h2>

<p>WebVTT の MIME タイプは <code>text/vtt</code> です。</p>

<p>WebVTT ファイル（<code>.vtt</code>）にはキューが含まれています。キューは、次のように単一行または複数行になります。</p>

<pre class="notranslate">WEBVTT

00:01.000 --&gt; 00:04.000
液体窒素を絶対に飲まないでください。

00:05.000 --&gt; 00:09.000
- それはあなたの胃に穴をあけます。
- あなたは死ぬ可能性があります。
</pre>

<h2 id="WebVTT_body" name="WebVTT_body">WebVTT の本体</h2>

<p>WebVTT の構造は、以下のコンポーネントで構成されています。一部のコンポーネントはオプションです。</p>

<ul>
 <li>オプションのバイトオーダーマーク（BOM）。</li>
 <li>文字列 "<code>WEBVTT</code>"。</li>
 <li><code>WEBVTT</code> の右側にあるオプションのテキストヘッダー。
  <ul>
   <li><code>WEBVTT</code> の後には少なくとも1つのスペースが必要です。</li>
   <li>これを使用してファイルに説明を追加できます。</li>
   <li>改行または文字列 "<code>--&gt;</code>" を除いて、テキストヘッダーには何でも使用できます。</li>
  </ul>
 </li>
 <li>空白行。2つの連続した改行に相当します。</li>
 <li>ゼロ個以上のキューまたはコメント。（訳注：これらのブロックは1つ以上の空白行で互いに区切られています。）</li>
 <li>ゼロ行以上の空白行。（訳注：ファイルの終りも空白行という扱いです。）</li>
</ul>

<h5 id="Example_1_-_Simplest_possible_WEBVTT_file" name="Example_1_-_Simplest_possible_WEBVTT_file">例 1 - 最も単純な WebVTT ファイル</h5>

<pre class="eval notranslate">WEBVTT
</pre>

<h5 id="Example_2_-_Very_simple_WebVTT_file_with_a_text_header" name="Example_2_-_Very_simple_WebVTT_file_with_a_text_header">例 2 - テキストヘッダーを持つ非常に単純な WebVTT ファイル</h5>

<pre class="eval notranslate">WEBVTT - このファイルにはキューがありません。
</pre>

<h5 id="Example_3_-_Common_WebVTT_example_with_a_header_and_cues" name="Example_3_-_Common_WebVTT_example_with_a_header_and_cues">例 3 - ヘッダーとキューを使用した一般的な WebVTT の例</h5>

<pre class="eval notranslate">WEBVTT - このファイルにはキューがあります。

14
00:01:14.815 --&gt; 00:01:18.114
- What?
- Where are we now?

15
00:01:18.171 --&gt; 00:01:20.991
- This is big bat country.

16
00:01:21.058 --&gt; 00:01:23.868
- [ Bats Screeching ]
- They won't get in your hair. They're after the bugs.
</pre>

<h3 id="Inner_structure_of_a_WebVTT_file" name="Inner_structure_of_a_WebVTT_file">WebVTT ファイルの内部構造</h3>

<p>前の例の1つを再検討し、キューの構造をもう少し詳しく見てみましょう。</p>

<pre class="notranslate">WEBVTT

00:01.000 --&gt; 00:04.000
- 液体窒素を絶対に飲まないでください。

00:05.000 --&gt; 00:09.000
- それはあなたの胃に穴をあけます。
- あなたは死ぬ可能性があります。

NOTE これはファイルの最後の行です</pre>

<p>各キューは、</p>

<ul>
 <li>最初の行は時間で始まります。これは、下にあるテキストを表示するための開始時間です。</li>
 <li>同じ行に、<code>--&gt;</code> という文字列があります。</li>
 <li>最初の行を2つ目の時間で終了します。これは、関連するテキストを表示するための終了時間です。</li>
 <li>ハイフン（<code>-</code>）で始まる1行以上の行を表示できます。各行には表示するテキストトラックの一部が含まれています。（訳注：ハイフンは関係なく、空白行が現れるまでです。）</li>
</ul>

<p>ファイルの一部に関する重要な情報を思い出すのに役立つように、<code>.vtt</code> ファイルにコメントを入れることもできます。これらは、文字列 <code>NOTE</code> で始まる別々の行にあるべきです。以下のセクションでこれらについての詳細を見つけるでしょう。</p>

<p>タイミング行とキューペイロードの間など、キュー内で「余分な」空白行を使用しないことが重要です。WebVTT は行ベースで、空白行がキューを閉じます。（訳注：空白行は、キュー以外のブロックも閉じます。<code>--&gt;</code> があるべき場所にあるのが、キューブロックということです。ファイル内のそれ以外の場所での <code>--&gt;</code> の存在は許されていません。）</p>

<h2 id="WebVTT_comments" name="WebVTT_comments">WebVTT のコメント</h2>

<p>コメントは、WebVTT ファイルに情報を追加するために使用できるオプションのコンポーネントです。コメントはファイルを読む人のためのものであり、ユーザーには見えません。コメントには改行を含めることができますが、空白行を含めることはできません。これは、連続する2行の改行と同じです。空白行はコメントの終わりを表します。</p>

<p>コメントには、文字列 "<code>--&gt;</code>"、アンパサンド文字（<code>&amp;</code>）、小なり記号（<code>&lt;</code>）を含めることはできません。このような文字を使用したい場合は、アンパサンドには <code>&amp;amp;</code>、小なりには <code>&amp;lt;</code> を使用してエスケープする必要があります。タグとの混同を避けるために、大なり記号（<code>&gt;</code>）の代わりに大なりエスケープシーケンス（<code>&amp;gt;</code>）を使用することをお勧めします。</p>

<p>コメントは次の3つの部分で構成されています。</p>

<ul>
 <li>文字列 <code>NOTE</code>。</li>
 <li>スペースまたは改行。</li>
 <li>上記以外のゼロ個以上の文字。</li>
</ul>

<h5 id="Example_4_-_Common_WebVTT_example" name="Example_4_-_Common_WebVTT_example">例 4 - 一般的な WebVTT の例</h5>

<pre class="eval notranslate">NOTE これはコメントです
</pre>

<h5 id="Example_5_-_Multi-line_comment" name="Example_5_-_Multi-line_comment">例 5 - 複数行のコメント</h5>

<pre class="eval notranslate">NOTE
複数行に
またがる別のコメント。

NOTE このように複数行にまたがって
コメントすることもできます。
</pre>

<h5 id="Example_6_-_Common_comment_usage" name="Example_6_-_Common_comment_usage">例 6 - 一般的なコメントの使い方</h5>

<pre class="eval notranslate">WEBVTT - 好きな映画の翻訳

NOTE
何人かの友人が彼らの両親と一緒にそれを見ることができるように、
この翻訳は Kyle によってされました。

1
00:02:15.000 --&gt; 00:02:20.000
- Ta en kopp varmt te.
- Det är inte varmt.

2
00:02:20.000 --&gt; 00:02:25.000
- Har en kopp te.
- Det smakar som te.

NOTE この最後の行はうまく翻訳されていないかもしれません。

3
00:02:25.000 --&gt; 00:02:30.000
- Ta en kopp
</pre>

<h2 id="Styling_WebTT_cues" name="Styling_WebTT_cues">WebTT キューのスタイリング</h2>

<p>{{cssxref("::cue")}} 疑似要素に一致する要素を探すことで WebTT キューをスタイルすることができます。</p>

<h3 id="Within_site_CSS" name="Within_site_CSS">サイトの CSS の中</h3>

<pre class="brush: css notranslate">video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}
</pre>

<p>ここでは、すべての動画要素は背景として灰色の線形グラデーションを使用するようにスタイル設定しており、前景色は <code>"papayawhip"</code> です。また、{{HTMLElement("b")}} 要素を使用して太字になっているテキストは、<code>"peachpuff"</code> で色づけしています。</p>

<p>以下の HTML スニペットは実際にメディア自体の表示を処理します。</p>

<pre class="brush: html notranslate">&lt;video controls autoplay src="video.webm"&gt;
 &lt;track default src="track.vtt"&gt;
&lt;/video&gt;
</pre>

<h3 id="Within_the_WebVTT_file_itself" name="Within_the_WebVTT_file_itself">WebVTT ファイル自体の中</h3>

<p>WebVTT ファイルで直接スタイルを定義することもできます。この場合、CSS 規則をファイルに挿入します。次に示すように、各規則の前には、すべてに一行のテキストで文字列 "<code>STYLE</code>" が付いています。</p>

<pre class="notranslate">WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* スタイルブロックは空白行も  "ハイフンハイフン大なり" も使用できません */

NOTE コメントブロックはスタイルブロックの間で使用できます。

STYLE
::cue(b) {
  color: peachpuff;
}

00:00:00.000 --&gt; 00:00:10.000
- Hello &lt;b&gt;world&lt;/b&gt;.

NOTE スタイルブロックは、最初のキューの後には出現できません。</pre>

<p>WebVTT ファイル内で識別子を使用することもできます。これは、ファイル内の特定のキューに対する新しいスタイルを定義するために使用できます。転記テキスト（transcription text）を赤で強調表示し、他の部分を通常のままにしたい例は、CSS を使用して次のように定義できます。CSS が HTML のページで使用しているのと同じ方法でエスケープシーケンスを使用していることに注意する必要があります。</p>

<pre class="notranslate">WEBVTT

1
00:00.000 --&gt; 00:02.000
That’s an, an, that’s an L!

crédit de transcription
00:04.000 --&gt; 00:05.000
Transcrit par Célestes™
</pre>

<pre class="brush: css notranslate">::cue(#\31) { color: lime; }
::cue(#crédit\ de\ transcription) { color: red; }</pre>

<p>以下に示すように、キュー内のタイミングの後に位置情報を含めることで、テキストトラックの位置もサポートします（詳細については、{{anch("Cue settings","キュー設定")}}を参照してください）。</p>

<pre class="notranslate">WEBVTT

00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
Where did he go?

00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?</pre>

<h2 id="WebVTT_cues" name="WebVTT_cues">WebTT キュー</h2>

<p>キューは、単一の開始時間、終了時間、およびテキストペイロードを持つ単一の字幕ブロックです。例 6 は、ヘッダー、空白行、および空白行で区切られた5つのキューから構成されています。キューは次の5つの要素で構成されています。</p>

<ul>
 <li>オプションのキュー識別子とそれに続く改行。</li>
 <li>キューのタイミング。</li>
 <li>最初の設定の前と各設定の間に少なくとも1つのスペースを持つオプションのキュー設定。</li>
 <li>1つ以上の改行。（訳注：1つの改行。）</li>
 <li>キューペイロードのテキスト。</li>
</ul>

<h5 id="Example_7_-_Example_of_a_cue" name="Example_7_-_Example_of_a_cue">例 7 - キューの例</h5>

<pre class="eval notranslate">1 - Title Crawl
00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
Some time ago in a place rather distant....</pre>

<h3 id="Cue_identifier" name="Cue_identifier">キュー識別子</h3>

<p>識別子は、キューを識別する名前です。スクリプトからキューを参照するために使用できます。改行を含んではならず、文字列 "<code>--&gt;</code>" を含むことはできません。それは単一の改行で終わらなければなりません。番号をつけるのが一般的ですが（例えば、1、2、3、...）、それらは一意である必要はありません。</p>

<h5 id="Example_8_-_Cue_identifier_from_Example_7" name="Example_8_-_Cue_identifier_from_Example_7">例 8 - 例 7 のキュー識別子</h5>

<pre class="eval notranslate">1 - Title Crawl</pre>

<h5 id="Example_9_-_Common_usage_of_identifiers" name="Example_9_-_Common_usage_of_identifiers">例 9 - 識別子の一般的な使い方</h5>

<pre class="eval notranslate">WEBVTT

1
00:00:22.230 --&gt; 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --&gt; 00:00:34.074
This is the second.

3
00:00:34.159 --&gt; 00:00:35.743
Third
</pre>

<h3 id="Cue_timings" name="Cue_timings">キューのタイミング</h3>

<p>キューのタイミングは、キューがいつ表示されるかを示します。タイムスタンプで表される開始時間と終了時間があります。終了時間は開始時間より長くなければならず、開始時間は前のすべての開始時間より長くなければなりません。キューは、タイミングが重複するかもしれません。</p>

<p>WebVTT ファイルをチャプターに使用している場合（{{HTMLElement("track")}} の {{htmlattrxref("kind","track")}} は <code>chapters</code> です）、ファイルは重複するタイミングを持つことはできません。</p>

<p>各キューのタイミングには次の5つのコンポーネントがあります。</p>

<ul>
 <li>開始時間のタイムスタンプ。</li>
 <li>少なくとも1つのスペース。</li>
 <li>文字列 "<code>--&gt;</code>"。</li>
 <li>少なくとも1つのスペース。</li>
 <li>終了時間のタイムスタンプ。
  <ul>
   <li>開始時間より長くなければなりません。</li>
  </ul>
 </li>
</ul>

<p>タイムスタンプは、次の2つの形式のいずれかになります。</p>

<ul>
 <li><code>mm:ss.ttt</code></li>
 <li><code>hh:mm:ss.ttt</code></li>
</ul>

<p>そのコンポーネントは次のように定義されています。</p>

<ul>
 <li><code>hh</code> は時間です。

  <ul>
   <li>2桁以上でなければなりません。</li>
   <li>時間は2桁を超えることがあります（例えば、9999:00:00.00）。</li>
  </ul>
 </li>
 <li><code>mm</code> は分です。
  <ul>
   <li>00 以上 59 以下でなければなりません。</li>
  </ul>
 </li>
 <li><code>ss</code> は秒です。
  <ul>
   <li>00 以上 59 以下でなければなりません。</li>
  </ul>
 </li>
 <li><code>ttt</code> はミリ秒です。
  <ul>
   <li>000 以上 999 以下でなければなりません。</li>
  </ul>
 </li>
</ul>

<h5 id="Example_10_-_Basic_cue_timing_examples" name="Example_10_-_Basic_cue_timing_examples">例 10 - 基本的なキューのタイミングの例</h5>

<pre class="eval notranslate">00:22.230 --&gt; 00:24.606
00:30.739 --&gt; 00:00:34.074
00:00:34.159 --&gt; 00:35.743
00:00:35.827 --&gt; 00:00:40.122</pre>

<h5 id="Example_11_-_Overlapping_cue_timing_examples" name="Example_11_-_Overlapping_cue_timing_examples">例 11 - 重複したキューのタイミングの例</h5>

<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
00:00:05.000 --&gt; 00:01:00.000
00:00:30.000 --&gt; 00:00:50.000</pre>

<h5 id="Example_12_-_Non-overlapping_cue_timing_examples" name="Example_12_-_Non-overlapping_cue_timing_examples">例 12 - 重複しないキューのタイミングの例</h5>

<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
00:00:10.000 --&gt; 00:01:00.581
00:01:00.581 --&gt; 00:02:00.100
00:02:01.000 --&gt; 00:02:01.000</pre>

<h3 id="Cue_settings" name="Cue_settings">キュー設定</h3>

<p>キュー設定は、動画上にキューペイロードのテキストを表示する位置を決めるために使用するオプションのコンポーネントです。これには、テキストを水平に表示するか垂直に表示するかが含まれます。それらは0個以上存在することができ、各設定が2回以上使用されない限り、それらは任意の順序で使用できます。</p>

<p>キュー設定は、キューのタイミングの右側に追加します。キューのタイミングと最初の設定の間、および各設定の間には1つ以上のスペースが必要です。設定の名前と値はコロンで区切ります。設定では大文字と小文字が区別されるため、次のように小文字を使用してください。次の5つのキュー設定があります。</p>

<ul>
 <li><strong>vertical</strong>

  <ul>
   <li>アジア言語のように、テキストを水平ではなく垂直に表示することを示します。</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="2">表 1 - vertical の値</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th><code>vertical:rl</code></th>
     <td>書き込み方向は右から左です</td>
    </tr>
    <tr>
     <th><code>vertical:lr</code></th>
     <td>書き込み方向は左から右です</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>line</strong>
  <ul>
   <li>テキストを垂直方向に表示する場所を指定します。vertical を設定している場合、line はテキストを水平方向に表示する場所を指定します。</li>
   <li>値は行番号です。
    <ul>
     <li>行の高さは、動画に表示されるキューの最初の行の高さです。</li>
     <li>正の数はトップダウンを示します。</li>
     <li>負の数はボトムアップを示します。</li>
    </ul>
   </li>
   <li>値はパーセントでもかまいません。
    <ul>
     <li>0 から 100 までの整数（つまり、小数点なし）でなければなりません。（訳注：仕様ではパーセントは小数点ありも可です。）</li>
     <li>その後にパーセント記号（<code>%</code>）を付ける必要があります。</li>
    </ul>
   </li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">表 2 - line の例</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> の省略</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>line:0</code></th>
     <td>上</td>
     <td>右</td>
     <td>左</td>
    </tr>
    <tr>
     <th><code>line:-1</code></th>
     <td>下</td>
     <td>左</td>
     <td>右</td>
    </tr>
    <tr>
     <th><code>line:0%</code></th>
     <td>上</td>
     <td>右</td>
     <td>左</td>
    </tr>
    <tr>
     <th><code>line:100%</code></th>
     <td>下</td>
     <td>左</td>
     <td>右</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>position</strong>
  <ul>
   <li>テキストを水平方向に表示する場所を指定します。vertical を設定している場合、position はテキストを垂直方向に表示する場所を指定します。</li>
   <li>値はパーセントです。</li>
   <li>0 から 100 までの整数（小数点なし）でなければなりません。</li>
   <li>その後にパーセント記号（<code>%</code>）を付ける必要があります。</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">表 3 - position の例</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> の省略</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>position:0%</code></th>
     <td>左</td>
     <td>上</td>
     <td>上</td>
    </tr>
    <tr>
     <th><code>position:100%</code></th>
     <td>右</td>
     <td>下</td>
     <td>下</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>size</strong>
  <ul>
   <li>テキスト領域の幅を指定します。vertical を設定している場合、size はテキスト領域の高さを指定します。</li>
   <li>値はパーセントです。</li>
   <li>0 から 100 までの整数（つまり、小数点なし）でなければなりません。</li>
   <li>その後にパーセント記号（<code>%</code>）を付ける必要があります。</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">表 4 - size の例</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> の省略</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>size:100%</code></th>
     <td>全幅</td>
     <td>全高</td>
     <td>全高</td>
    </tr>
    <tr>
     <th><code>size:50%</code></th>
     <td>半幅</td>
     <td>半高</td>
     <td>半高</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>align</strong>
  <ul>
   <li>テキストの配置を指定します。設定している場合、テキストは size キュー設定で指定したスペース内に配置されます。</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">表 5 - align の値</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> の省略</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>align:start</code></th>
     <td>左</td>
     <td>上</td>
     <td>上</td>
    </tr>
    <tr>
     <th><code>align:middle</code></th>
     <td>水平中央</td>
     <td>垂直中央</td>
     <td>垂直中央</td>
    </tr>
    <tr>
     <th><code>align:end</code></th>
     <td>右</td>
     <td>下</td>
     <td>下</td>
    </tr>
   </tbody>
  </table>
 </li>
</ul>

<h5 id="Example_13_-_Cue_setting_examples" name="Example_13_-_Cue_setting_examples">例 13 - キュー設定の例</h5>

<p>最初の行は設定がないことを示しています。2行目は、サインやラベルの上にテキストを重ねるために使用します。3行目はタイトルに使用できます。最後の行はアジアの言語に使われるかもしれません。</p>

<pre class="eval notranslate">00:00:05.000 --&gt; 00:00:10.000
00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
</pre>

<h3 id="Cue_payload" name="Cue_payload">キューペイロード</h3>

<p>ペイロードは、主な情報またはコンテンツを配置する場所です。通常の使用法では、ペイロードには表示する字幕が含まれています。ペイロードのテキストには改行を含めることができますが、空白行を含めることはできません。これは、2つの連続する改行に相当します。空白行はキューの終わりを表します。</p>

<p>キューペイロードのテキストには、文字列 "<code>--&gt;</code>"、アンパサンド文字（<code>&amp;</code>）、小なり記号（<code>&lt;</code>）を含めることはできません。代わりに、アンパサンドにはエスケープシーケンス "<code>&amp;amp;</code>" を使用し、小なりには "<code>&amp;lt;</code>" を使用します。タグとの混同を避けるために、大なり記号（<code>&gt;</code>）の代わりに大なりエスケープシーケンス "<code>&amp;gt;</code>" を使用することをお勧めします。メタデータに WebVTT ファイルを使用している場合、これらの制限は適用されません。</p>

<p>上記の3つのエスケープシーケンスに加えて、他にも4つあります。それらは以下の表にリストされています。</p>

<table>
 <thead>
  <tr>
   <th colspan="3">表 6 - エスケープシーケンス</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>名前</th>
   <th>文字</th>
   <th>エスケープシーケンス</th>
  </tr>
  <tr>
   <td>アンパサンド</td>
   <td>&amp;</td>
   <td><code>&amp;amp;</code></td>
  </tr>
  <tr>
   <td>小なり</td>
   <td>&lt;</td>
   <td><code>&amp;lt;</code></td>
  </tr>
  <tr>
   <td>大なり</td>
   <td>&gt;</td>
   <td><code>&amp;gt;</code></td>
  </tr>
  <tr>
   <td>左から右へのマーク</td>
   <td></td>
   <td><code>&amp;lrm;</code></td>
  </tr>
  <tr>
   <td>右から左へのマーク</td>
   <td></td>
   <td><code>&amp;rlm;</code></td>
  </tr>
  <tr>
   <td>改行なしスペース</td>
   <td></td>
   <td><code>&amp;nbsp;</code></td>
  </tr>
 </tbody>
</table>

<h3 id="Cue_payload_text_tags" name="Cue_payload_text_tags">キューペイロードのテキストタグ</h3>

<p><code>&lt;bold&gt;</code> のような、使用できるタグがいくつかあります。ただし、WebVTT ファイルを {{htmlattrxref("kind","track")}} 属性が <code>chapters</code> である {{HTMLElement("track")}} 要素で使用している場合は、タグを使用できません。</p>

<ul>
 <li>タイムスタンプタグ
  <ul>
   <li>タイムスタンプは、キューの開始タイムスタンプより大きく、キューペイロード内の前のタイムスタンプより大きく、キューの終了タイムスタンプより小さくなければなりません。<em>アクティブテキスト</em>は、タイムスタンプと次のタイムスタンプの間、またはペイロードに別のタイムスタンプがない場合はペイロードの最後までのテキストです。ペイロード内の<em>アクティブテキスト</em>より前のテキストはすべて<em>過去のテキスト</em>です。<em>アクティブテキスト</em>より後のテキストはすべて<em>将来のテキスト</em>です。これによりカラオケスタイルのキャプションが有効になります。</li>
  </ul>

  <div>
  <h5 id="Example_12_-_Karaoke_style_text" name="Example_12_-_Karaoke_style_text">例 12 - カラオケスタイルのテキスト</h5>

  <pre class="eval notranslate">1
00:16.500 --&gt; 00:18.500
When the moon &lt;00:17.500&gt;hits your eye

1
00:00:18.500 --&gt; 00:00:20.500
Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie

1
00:00:20.500 --&gt; 00:00:21.500
That's &lt;00:00:21.000&gt;amore
</pre>
  </div>
 </li>
</ul>

<p>次のタグは、キューで使用できる HTML タグで、開始タグと終了タグ（例えば、<code>&lt;b&gt;テキスト&lt;/b&gt;</code>）が必要です。</p>

<ul>
 <li><strong>クラスタグ</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)

  <ul>
   <li>CSS クラスを使用して含まれているテキストをスタイルします。</li>
  </ul>

  <div>
  <h5 id="Example_14_-_Class_tag" name="Example_14_-_Class_tag">例 14 - クラスタグ</h5>

  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
  </div>
 </li>
 <li><strong>イタリック体タグ</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
  <ul>
   <li>含まれているテキストをイタリック体にします。</li>
  </ul>

  <div>
  <h5 id="Example_15_-_Italics_tag" name="Example_15_-_Italics_tag">例 15 - イタリック体タグ</h5>

  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
  </div>
 </li>
 <li><strong>太字タグ</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
  <ul>
   <li>含まれているテキストを太字にします。</li>
  </ul>

  <div>
  <h5 id="Example_16_-_Bold_tag" name="Example_16_-_Bold_tag">例 16 - 太字タグ</h5>

  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
  </div>
 </li>
 <li><strong>下線タグ</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
  <ul>
   <li>含まれているテキストに下線を引きます。</li>
  </ul>

  <div>
  <h5 id="Example_17_-_Underline_tag" name="Example_17_-_Underline_tag">例 17 - 下線タグ</h5>

  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
  </div>
 </li>
 <li><strong>ルビタグ</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
  <ul>
   <li><a href="https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%93">ルビ文字</a>（すなわち、他の文字の上にある小さな注釈文字）を表示するためにルビテキストタグと共に使用します。</li>
  </ul>

  <div>
  <h5 id="Example_18_-_Ruby_tag" name="Example_18_-_Ruby_tag">例 18 - ルビタグ</h5>

  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
  </div>
 </li>
 <li><strong>ルビテキストタグ</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
  <ul>
   <li><a href="https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%93">ルビ文字</a>（つまり、他の文字の上にある小さな注釈文字）を表示するためにルビタグとともに使用します。</li>
  </ul>

  <div>
  <h5 id="Example_19_-_Ruby_text_tag" name="Example_19_-_Ruby_text_tag">例 19 - ルビテキストタグ</h5>

  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
  </div>
 </li>
 <li><strong>ボイスタグ</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
  <ul>
   <li>クラスタグと同様に、CSS を使用して含まれているテキストをスタイルするためにも使用します。</li>
  </ul>

  <div>
  <h5 id="Example_20_-_Voice_tag" name="Example_20_-_Voice_tag">例 20 - ボイスタグ</h5>

  <pre class="notranslate">&lt;v Bob&gt;text&lt;/v&gt;</pre>
  </div>
 </li>
</ul>

<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>

<p>WebVTT で使用するインターフェイスまたは API は次の2つがあります。</p>

<h3 id="VTTCue_interface" name="VTTCue_interface">VTTCue インターフェイス</h3>

<p>これは、Document Object Model API でインターフェイスを提供するために使用し、そこでサポートしているさまざまな属性を使用して、さまざまな方法でキューを準備および変更できます。</p>

<p>コンストラクタは、キューの開始時間、終了時間、およびテキストを調整できるデフォルトのコンストラクタ <code>VTTCue(startTime, endTime, text)</code> を使用して定義された、キューを開始する最初のポイントです。その後、<code>cue.region</code> を使って、このキューが属する特定のキューの領域を設定できます。CSS を使用して HTML でオブジェクトのフォーム、シェイプ、および表示を変更するのと同じように、<code>vertical</code>、<code>horizontal</code>、<code>line</code>、<code>lineAlign</code>、<code>position</code>、<code>positionAlign</code>、<code>text</code>、<code>size</code>、および <code>align</code> を使用して、キューとそのフォーメーションを変更できます。しかし、<code>VTTCue</code> インターフェイスは WebVTT 内にあり、キューを変更するために直接使用できる幅広い調整変数を提供します。以下のインターフェイスは、DOM API で WebVTT キューを公開するために使用できます。</p>

<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> };
enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> };
enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> };
enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> };
enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> };
[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)]
interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> {
  attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>;
  attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>;
  attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>;
  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>;
  attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>;
  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>;
  attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>;
  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>;
  attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>;
  attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>;
  <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>();
};</pre>

<h3 id="VTT_Region_interface" name="VTT_Region_interface">VTT Region インターフェイス</h3>

<p>これは WebVTT API の2番目のインターフェイスです。</p>

<p><code>new</code> キーワードは、複数のキューを含めるために使用できる新しい <code>VTTRegion</code> オブジェクトを定義するために使用できます。この VTT 領域の外観を指定するために使用できる <code>width</code>、<code>lines</code>、<code>regionAnchorX</code>、<code>regionAnchorY</code>、<code>viewportAnchorX</code>、<code>viewportAnchorY</code>、および <code>scroll</code> という <code>VTTRegion</code> のいくつかのプロパティがあります。DOM API で WebVTT 領域を公開するために使用できるインターフェイスコードを以下に示します。</p>

<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> };
[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>]
interface <dfn>VTTRegion</dfn> {
  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>;
  attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>;
  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>;
  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>;
  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>;
  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>;
  attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>;
};</pre>

<h2 id="Methods_and_properties" name="Methods_and_properties">メソッドとプロパティ</h2>

<p>WebVTT で使用するメソッドは、両方のインターフェイスの属性が異なるため、キューまたは領域を変更するために使用するものです。WebVTT の各インターフェイスに関する理解を深めるために、それらを分類することができます。</p>

<ul style="list-style-type: circle;">
 <li>
  <h3 id="VTTCue" name="VTTCue">VTTCue</h3>

  <ul>
   <li>このインターフェイスで利用できるメソッドは次のとおりです。
    <ul style="list-style-type: circle;">
     <li>そのキューの HTML を取得するための getCueAsHTML。</li>
     <li>キューの新しいオブジェクトを作成するための VTT コンストラクタ。</li>
     <li>Autokeyword。</li>
     <li>DirectionSetting: ファイル内のキャプションまたはテキストの方向を設定します。</li>
     <li>LineAlignment: 行の配置を調整します。</li>
     <li>PositionAlignSetting: テキストの位置を調整します。</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <h3 id="VTTRegion" name="VTTRegion">VTTRegion</h3>

  <ul>
   <li>領域に使用するメソッドは、それらの機能の説明とともに以下にリストされています。
    <ul style="list-style-type: circle;">
     <li>ScrollSetting: 特定の領域に存在するすべてのノードのスクロール設定を調整します。</li>
     <li>VTT Region コンストラクタ: 新しい VTT Region の構築用。</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

<h2 id="Tutorial_on_how_to_write_a_WebVTT_file" name="Tutorial_on_how_to_write_a_WebVTT_file">WebVTT ファイルの書き方に関するチュートリアル</h2>

<p>簡単な WebVTT ファイルを書くために従うことができるいくつかのステップがあります。開始する前に、メモ帳を使用してからファイルを「.vtt」ファイルとして保存できることに注意する必要があります。手順は以下のとおりです。</p>

<ol>
 <li>メモ帳を開きます。</li>
 <li>WebVTT の最初の行は、ファイルがファイルの種類を示し始めるときに他の言語ではヘッダーを配置するように要求されるのと同様に標準化されています。最初の1行は次のように書く必要があります。</li>
</ol>

<pre class="notranslate">WEBVTT</pre>

<ol start="3">
 <li>2行目を空白のままにして、3行目で最初のキューの時間を指定します。例えば、時間が1秒で始まり5秒で終わる最初のキューでは、次のようになります。</li>
</ol>

<pre class="notranslate">00:01.000 --&gt; 00:05.000</pre>

<ol start="4">
 <li>次の行に、このキューのキャプションを書くことができます。キャプションは1秒から5秒までです。</li>
 <li>同様の手順に従って、特定の動画または音声ファイル用の完全な WebVTT ファイルを作成できます。</li>
</ol>

<h2 id="CSS_pseudo-classes" name="CSS_pseudo-classes">CSS 疑似クラス</h2>

<p>CSS 疑似クラスを使用すると、他の種類のオブジェクトと区別したいオブジェクトの種類を分類できます。WebVTT ファイルでも HTML ファイルと同じように機能します。</p>

<p>WebVTT がサポートしている優れた機能の1つは、特定のタイプのオブジェクトのスタイルを分類するために HTML や CSS で使用しているのと同じ方法で使用できるクラス要素のローカライズと使用です。しかし、ここでは、次のようにキューのスタイルと分類に使用します。</p>

<pre class="notranslate">WEBVTT

04:02.500 --&gt; 04:05.000
J’ai commencé le basket à l'âge de 13, 14 ans

04:05.001 --&gt; 04:07.800
Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>

<p>上記の例では、キャプションの言語を定義するために識別子と疑似クラス名を使用できることがわかります。<code>&lt;i&gt;</code> タグはイタリック体用です。</p>

<p>疑似クラスのタイプはそれを使用しているセレクターによって決定し、それは HTML で機能するのと同じように機能します。以下の CSS 疑似クラスを使用することができます。</p>

<ul>
 <li>Lang (Lanugage): 例えば、<code>p:lang(it)</code>。</li>
 <li>Link: 例えば、<code>a:link</code>。</li>
 <li>Nth-last-child: 例えば、<code>p:nth-last-child(2)</code>。</li>
 <li>Nth-child(n): 例えば、<code>p:nth-child(2)</code>。</li>
</ul>

<p>ここで、<code>p</code> と <code>a</code> は、それぞれ HTML で段落とリンクに使用するタグであり、WebVTT ファイルのキューに使用する識別子に置き換えることができます。</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>仕様</th>
   <th>状態</th>
   <th>コメント</th>
  </tr>
  <tr>
   <td>{{SpecName("WebVTT")}}</td>
   <td>{{Spec2("WebVTT")}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>



<h3 id="VTTCue_interface_2" name="VTTCue_interface_2"><code>VTTCue</code> インターフェイス</h3>

<div>


<p>{{Compat("api.VTTCue", 0)}}</p>

<h3 id="TextTrack_interface" name="TextTrack_interface"><code>TextTrack</code> インターフェイス</h3>

<div>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TextTrack", 0)}}</p>

<h3 id="Notes" name="Notes">注</h3>
</div>
</div>



<p>Firefox 50 より前のバージョンでは、<code>AlignSetting</code> 列挙体（{{domxref("VTTCue.align")}} に指定可能な値を表す）に、<code>"center"</code> ではなく <code>"middle"</code> という値が誤って含まれていました。これは修正されました。</p>

<p>WebVTT は Firefox 24 ではデフォルトの {{pref("media.webvtt.enabled")}} の背後に実装されていましたが、デフォルトでは無効になっています。この設定を <code>true</code> に設定することで有効にできます。WebVTT は Firefox 31 以降ではデフォルトで有効になっていますが、設定を <code>false</code> に設定することで無効にすることができます。</p>

<p>Firefox 58 より前のバージョンでは、<code>REGION</code> キーワードは {{domxref("VTTRegion")}} オブジェクトを作成していましたが、使用していませんでした。Firefox 58 は現在 <code>VTTRegion</code> とその使用を完全にサポートしています。ただし、この機能は設定 <code>media.webvtt.regions.enabled</code> の背後でデフォルトで無効になっています。Firefox 58 で領域のサポートを有効にするには、<code>true</code> に設定します。領域は Firefox 59 以降でデフォルトで有効になっています（{{bug(1338030)}} および {{bug(1415805)}} のバグを参照）。</p>