Menu

Web video text tracks - WebVTT for thisPlayer

thisPlayer uses WebVTT .vtt text tracks to represent timed text tracks such as subtitles or captions. Unlikely regular WebVTT method of HTML5 media player thisPlayer does little bit different and much more easy way to create and use timed text tracks.

See source of the example.vtt file below:

WEBVTT FILE

1 /* Number of text track timed portion (Optional) */
00:00.000 --> 00:05.000 /* Time from/to when certain text track portion should be represented (Required) */
- <strong>Sam:</strong> Hi John how are you doing? /* First line of text (Required) */
- <strong>John:</strong> Hmm I'm good buddy /* Another line of text */

2 /* Another number of text track timed portion (Optional) */
00:02.000 --> 00:12.000 /* time from/to when certain text track portion should be represented (Required) */
<span style="color: red">John is laughing</span> /* A line of text for this portion of text tracks (Required) */

3
00:15.000 --> 00:20.000
- <strong>Sam:</strong> What is wrong with you buddy?

4
00:22.000 --> 00:30.000
- <strong>John:</strong> I'm OK dude just lough

5
00:31.000 --> 00:38.000
<strong style="color: red">Booooom</strong> - an atomic bomb has been exploded
John and Sam both are died :D

Its typical text tracks file content. Each portion of text track should be separated by empty line like it is show in example above. Also You can type multiple text lines in each portion of text track it is shown in example too. Also very great thing is that you can use regular HTML and CSS with text to style your text track cues.

Lets see how this works in live example below:

So it works perfect and this kind of text tracks are very easy and practical to use.