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

---
title: Formato de pistas de texto para la web (WebVTT)
slug: Web/API/WebVTT_API
translation_of: Web/API/WebVTT_API
---
<div>{{DefaultAPISidebar("WebVTT")}}</div>

<p><span class="seoSummary"><strong>El formato de pistas de texto para la web (WebVTT)</strong> es un formato para mostrar pistas de texto en le tiempo (como subtítulos) usando el elemento {{HTMLElement("track")}}.</span> El propósito principal de los archivos de WebVTT es superponer pistas de texto a un elemento {{HTMLElement("video")}}. WebVTT es un formato basado en el texto, que debe de ser codificado usando {{Glossary("UTF-8")}}. Donde puedes usar espacios también puedes usar tabulaciones. También hay una pequeña API disponible para representar y manejar estas pistas de texto y los datos necesarios para realizar la reproducción del texto en los momentos correctos.</p>

<h2 id="Archivos_WebVTT">Archivos WebVTT</h2>

<p>El tipo MIME de los archivos WebVTT es <code>text/vtt</code>.</p>

<p>Un archivo WebVTT (<code>.vtt</code>) contiene apuntes, que pueden ser tanto de una línea como de varias, como se muestra debajo:</p>

<pre class="notranslate">WEBVTT

00:01.000 --&gt; 00:04.000
- Nunca bebas nitrógeno líquido.

00:05.000 --&gt; 00:09.000
- Podría perforar tu estómago.
- Podrías morir.

NOTE Esta es la última línea en el archivo
</pre>

<h2 id="Estructura_WebVTT">Estructura WebVTT</h2>

<p>La estructura de un archivo WevWTT consiste de los siguientes componentes, algunos de ellos opcionales, en este orden:</p>

<ul>
 <li>Una marca de orden de bytes (BOM) opcional.</li>
 <li>La cadena de texto "<code>WEBVTT</code>".</li>
 <li>Un encabezado de texto opcional a la derecha de <code>WEBVTT</code>.
  <ul>
   <li>Debe haber al menos un espacio después de <code>WEBVTT</code>.</li>
   <li>Podrías usarlo para añadir una descripción al archivo.</li>
   <li>Puedes usar cualquier cosa en el encabezado de texto excepto saltos de línea o la cadena "<code>--&gt;</code>".</li>
  </ul>
 </li>
 <li>Una línea en blanco, que es equivalente a dos saltos de línea consecutivos.</li>
 <li>Cero o más apuntes o comentarios.</li>
 <li>Cero o más líneas en blanco.</li>
</ul>

<h5 id="Ejemplo_1_-_El_archivo_WebVTT_más_simple_posible">Ejemplo 1 - El archivo WebVTT más simple posible</h5>

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

<h5 id="Ejemplo_2_-_Archivo_WebVTT_muy_simple_con_un_encabezado_de_texto">Ejemplo 2 - Archivo WebVTT muy simple con un encabezado de texto</h5>

<pre class="eval notranslate">WEBVTT - Este archivo no tiene anotaciones.
</pre>

<h5 id="Ejemplo_3_-_Ejemplo_de_un_archivo_WebVTT_común_con_encabezado_y_anotaciones">Ejemplo 3 - Ejemplo de un archivo WebVTT común con encabezado y anotaciones</h5>

<pre class="eval notranslate">WEBVTT - Este archivo tiene anotaciones.

14
00:01:14.815 --&gt; 00:01:18.114
- ¿Qué?
- ¿Dónde estamos ahora?

15
00:01:18.171 --&gt; 00:01:20.991
- Este es el país de los murciélagos grandes.

16
00:01:21.058 --&gt; 00:01:23.868
- [ Murciélagos chillando ]
- Ellos no se pondrán entu pelo. Ellos están persiguiendo a los bichos.
</pre>

<h3 id="Estructura_interna_de_un_archivo_WebVTT">Estructura interna de un archivo WebVTT</h3>

<p>Vamos a reexaminar uno de nuestros ejemplos previos, y mirar la estructura de las anotaciones con un poco más de detalle.</p>

<pre class="notranslate">WEBVTT

00:01.000 --&gt; 00:04.000
- Nunca bebas nitrógeno líquido.

00:05.000 --&gt; 00:09.000
- Podría perforar tu estómago.
- Podrías morir.

NOTE Esta es la última línea en el archivo</pre>

<p>En el caso de cada anotación:</p>

<ul>
 <li>La primera línea se empieza con un tiempo, que es el tiempo en el que se empieza a mostrar el téxto que aparece debajo.</li>
 <li>En la misma línea, tenemos una cadena de texto "<code>--&gt;</code>".</li>
 <li>Acabamos la línea con un segundo tiempo, que es el tiempo en el que se termina de mostrar el texto asociado.</li>
 <li>Nosotros podemos entonces tener una o más líneas que empiezan con un guión, cada una de ellas conteniendo parte de la pista de texto para mostrar.</li>
</ul>

<p>También podemos poner comentarios en nuestro archivo <code>.vtt</code>, para ayudarnos a recorddar información importante sobre las partes de nuestro archivo. Estas deben estar en líneas separadas empezando con la cadena <code>NOTE</code>. Aprenderas más sobre eso en la siguiente sección.</p>

<p>Es importante no usar líneas en blanco extras dentro de una anotación, por ejemplo entre las líneas de tiempo y las anotaciones. WebVTT está basado en líneas, una línea en blanco finalizará la anotación.</p>

<h2 id="Comentarios_en_WebVTT">Comentarios en WebVTT</h2>

<p>Los comentarios son un componente opcional que se puede usar para añadir informacion a un archivo WebVTT. Los comentarios estan pensados para aquellos que leen el archivo y no se muestran con las pistas de texto. Los comentarios pueden contener saltos de línea pero no una línea en blanco, que es equivalente a dos saltos de línea consecutivos. Una línea en blanco indica el fin de un comentario.</p>

<p>Un comentario no puede contener la cadena de texto "<code>--&gt;</code>", el símbolo &amp;, o el signo de menor que (&lt;). Si quisieses usar esos caracteres necesitarías hacer un escape usando por ejemplo <code>&amp;amp;</code> para el símbolo &amp;, y &amp;lt; para menor que (&lt;). Tambien es recomendado que uses la secuencia de escape de mayor que <code>&amp;gt;</code> en vez de el simbo de mayor que (<code>&gt;</code>) para evitar la confusión con etiquetas.</p>

<p>Un comentario consiste en tres partes:</p>

<ul>
 <li>La cadena de texto <code>NOTE</code>.</li>
 <li>Un espacio o un salto de línea.</li>
 <li>Cero o más caracteres que no sean los indicados arriba.</li>
</ul>

<h5 id="Ejemplo_4_-_Ejemplo_común_de_WebVTT">Ejemplo 4 - Ejemplo común de WebVTT</h5>

<pre class="eval notranslate">NOTE Esto es un comentario
</pre>

<h5 id="Ejemplo_5_-_Comentario_multilínea">Ejemplo 5 - Comentario multilínea</h5>

<pre class="eval notranslate">NOTE
Un comentario que está ocupando
más de una línea.

NOTE También puedes hacer un comentario
que ocupe más de una línea de esta manera.
</pre>

<h5 id="Ejemplo_6_-_Uso_común_de_comentarios">Ejemplo 6 - Uso común de comentarios</h5>

<pre class="eval notranslate">WEBVTT - Traducción de la película que me gusta

NOTE
Esta traducción esta hecha por Kyle para que
Algunos amigos puedan verla con sus padres.

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 Esta ultima línea puede no estar bien traducida.

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

<h2 id="Estilizando_anotaciones_WebVTT">Estilizando anotaciones WebVTT</h2>

<p>Tu puedes estilizar anotaciones WebVTT buscado elementos que coincidan con el pseudoelemento {{cssxref("::cue")}}.</p>

<h3 id="Dentro_del_CSS_del_sitio">Dentro del CSS del sitio</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>Aquí, todos los elementos de video estan estilizados para usar un gradiente gris como fondo, con <code>"papayawhip"</code> como color principal. Además el texto en negrita usando el elemento {{HTMLElement("b")}} tiene el color <code>"peachpuff"</code>.</p>

<p>El ejemplo HTML de abajo actualemte se encarga de mostrar los archivos multimedia él solo.</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">Within the WebVTT file itself</h3>

<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>

<pre class="notranslate">WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

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

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

NOTE style blocks cannot appear after the first cue.</pre>

<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</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>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</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">WebVTT cues</h2>

<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>

<ul>
 <li>An optional cue identifier followed by a newline.</li>
 <li>Cue timings.</li>
 <li>Optional cue settings with at least one space before the first and between each setting.</li>
 <li>One or more newlines.</li>
 <li>The cue payload text.</li>
</ul>

<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</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">Cue identifier</h3>

<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>

<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>

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

<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</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">Cue timings</h3>

<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>

<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>

<p>Each cue timing contains five components:</p>

<ul>
 <li>Timestamp for start time.</li>
 <li>At least one space.</li>
 <li>The string "<code>--&gt;".</code></li>
 <li>At least one space.</li>
 <li>Timestamp for end time.
  <ul>
   <li>Which must be greater than the start time.</li>
  </ul>
 </li>
</ul>

<p>The timestamps must be in one of two formats:</p>

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

<p>Where the components are defined as follows:</p>

<ul>
 <li><code>hh</code> is hours.

  <ul>
   <li>Must be at least two digits.</li>
   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
  </ul>
 </li>
 <li><code>mm</code> is minutes.
  <ul>
   <li>Must be between 00 and 59 inclusive.</li>
  </ul>
 </li>
 <li><code>ss</code> is seconds.
  <ul>
   <li>Must be between 00 and 59 inclusive.</li>
  </ul>
 </li>
 <li><code>ttt</code> is miliseconds.
  <ul>
   <li>Must be between 000 and 999 inclusive.</li>
  </ul>
 </li>
</ul>

<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>

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

<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</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">Example 12 - Non-overlapping cue timing examples</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">Cue settings</h3>

<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>

<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>

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

  <ul>
   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="2">Table 1 - vertical values</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th><code>vertical:rl</code></th>
     <td>writing direction is right to left</td>
    </tr>
    <tr>
     <th><code>vertical:lr</code></th>
     <td>writing direction is left to right</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>line</strong>
  <ul>
   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
   <li>Value can be a line number.
    <ul>
     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
     <li>Positive numbers indicate top down.</li>
     <li>Negative numbers indicate bottom up.</li>
    </ul>
   </li>
   <li>Or value can be a percentage.
    <ul>
     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
     <li>Must be followed by a percent sign (%).</li>
    </ul>
   </li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">Table 2 - line examples</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> omitted</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>line:0</code></th>
     <td>top</td>
     <td>right</td>
     <td>left</td>
    </tr>
    <tr>
     <th><code>line:-1</code></th>
     <td>bottom</td>
     <td>left</td>
     <td>right</td>
    </tr>
    <tr>
     <th><code>line:0%</code></th>
     <td>top</td>
     <td>right</td>
     <td>left</td>
    </tr>
    <tr>
     <th><code>line:100%</code></th>
     <td>bottom</td>
     <td>left</td>
     <td>right</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>position</strong>
  <ul>
   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
   <li>Value is a percentage.</li>
   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
   <li>Must be followed by a percent sign (%).</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">Table 3 - position examples</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> omitted</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>position:0%</code></th>
     <td>left</td>
     <td>top</td>
     <td>top</td>
    </tr>
    <tr>
     <th><code>position:100%</code></th>
     <td>right</td>
     <td>bottom</td>
     <td>bottom</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>size</strong>
  <ul>
   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
   <li>Value is a percentage.</li>
   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
   <li>Must be followed by a percent sign (%).</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">Table 4 - size examples</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> omitted</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>size:100%</code></th>
     <td>full width</td>
     <td>full height</td>
     <td>full height</td>
    </tr>
    <tr>
     <th><code>size:50%</code></th>
     <td>half width</td>
     <td>half height</td>
     <td>half height</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li><strong>align</strong>
  <ul>
   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
  </ul>

  <table>
   <thead>
    <tr>
     <th colspan="4">Table 5 - align values</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th></th>
     <th><code>vertical</code> omitted</th>
     <th><code>vertical:rl</code></th>
     <th><code>vertical:lr</code></th>
    </tr>
    <tr>
     <th><code>align:start</code></th>
     <td>left</td>
     <td>top</td>
     <td>top</td>
    </tr>
    <tr>
     <th><code>align:middle</code></th>
     <td>centred horizontally</td>
     <td>centred vertically</td>
     <td>centred vertically</td>
    </tr>
    <tr>
     <th><code>align:end</code></th>
     <td>right</td>
     <td>bottom</td>
     <td>bottom</td>
    </tr>
   </tbody>
  </table>
 </li>
</ul>

<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>

<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</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">Cue payload</h3>

<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>

<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>

<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>

<table>
 <thead>
  <tr>
   <th colspan="3">Table 6 - Escape sequences</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Name</th>
   <th>Character</th>
   <th>Escape Sequence</th>
  </tr>
  <tr>
   <td>Ampersand</td>
   <td>&amp;</td>
   <td><code>&amp;amp;</code></td>
  </tr>
  <tr>
   <td>Less-than</td>
   <td>&lt;</td>
   <td><code>&amp;lt;</code></td>
  </tr>
  <tr>
   <td>Greater-than</td>
   <td>&gt;</td>
   <td><code>&amp;gt;</code></td>
  </tr>
  <tr>
   <td>Left-to-right mark</td>
   <td></td>
   <td><code>&amp;lrm;</code></td>
  </tr>
  <tr>
   <td>Right-to-left mark</td>
   <td></td>
   <td><code>&amp;rlm;</code></td>
  </tr>
  <tr>
   <td>Non-breaking space</td>
   <td><code> </code></td>
   <td><code>&amp;nbsp;</code></td>
  </tr>
 </tbody>
</table>

<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>

<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>

<ul>
 <li><strong>Timestamp tag</strong>

  <ul>
   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
  </ul>

  <div>
  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</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>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>

<ul>
 <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)

  <ul>
   <li>Style the contained text using a CSS class.</li>
  </ul>

  <div>
  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>

  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
  </div>
 </li>
 <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
  <ul>
   <li>Italicize the contained text.</li>
  </ul>

  <div>
  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>

  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
  </div>
 </li>
 <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
  <ul>
   <li>Bold the contained text.</li>
  </ul>

  <div>
  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>

  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
  </div>
 </li>
 <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
  <ul>
   <li>Underline the contained text.</li>
  </ul>

  <div>
  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>

  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
  </div>
 </li>
 <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
  <ul>
   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
  </ul>

  <div>
  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</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>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
  <ul>
   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
  </ul>

  <div>
  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</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>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
  <ul>
   <li>Similar to class tag, also used to style the contained text using CSS.</li>
  </ul>

  <div>
  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>

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

<h2 id="Interfaces">Interfaces</h2>

<p>There are two interfaces or APIs used in WebVTT which are:</p>

<h3 id="VTTCue_interface">VTTCue interface</h3>

<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p>

<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</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">VTT Region interface</h3>

<p>This is the second interface in WebVTT API.</p>

<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</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">Methods and properties</h2>

<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>

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

  <ul>
   <li>The methods which are available in this interface are:
    <ul style="list-style-type: circle;">
     <li>GetCueAsHTML to get the HTML of that Cue.</li>
     <li>VTT Constructor for creating new objects of Cues.</li>
     <li>Autokeyword.</li>
     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
     <li>LineAlignment: to adjust the line alignment.</li>
     <li>PositionAlignSetting: to adjust the position of text.</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <h3 id="VTTRegion">VTTRegion</h3>

  <ul>
   <li>The methods used for region are listed below along with description of their functionality:
    <ul style="list-style-type: circle;">
     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>

<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>

<ol>
 <li>Open a notepad.</li>
 <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li>
</ol>

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

<p>      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>

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

<ol>
 <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li>
 <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
</ol>

<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>

<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>

<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</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>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>

<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>

<ul>
 <li>Lang (Lanugage): e.g., p:lang(it).</li>
 <li>Link: e.g., a:link.</li>
 <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
 <li>Nth-child(n): e.g., p:nth-child(2).</li>
</ul>

<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("WebVTT")}}</td>
   <td>{{Spec2("WebVTT")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>

<div>


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

<h3 id="TextTrack_interface"><code>TextTrack</code> interface</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">Notes</h3>
</div>
</div>

<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>

<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>

<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>