What are SubRip(SRT) & WebVTT Subtitles & how do they work?

How do subtitles work on web streams and videos?

Introduction

From trying to understand a video in a different language, to improving the accessibility of your content, subtitles are a crucial tool that permit people of all ages and audiences to view a particular video. Produced after a piece of media is complete, subtitles are often found as a separate file (programs such as HandBrake have the ability to “burn” subtitles into a video, taking away the need for another file; this, however, prevents multiple languages from being supported, so it is not desirable in most situations).

With the advent of streaming services and user-uploaded content, the use of subtitles has grown and there are two popular formats that have become a de-facto “standard” for closed captioning on the web. The two common subtitle formats include both SubRip (SRT) files and Video Text Track (WebVTT) files (large streaming platforms such as YouTube and Netflix support the SRT standard).

SRT Subtitles

SubRip (SRT) subtitles are extremely simple in format; the subtitle file is delimited by newlines and subtitles are set to appear between a range of time. An example of a SRT-defined subtitle file is the following:

1
00:00:05,000 --> 00:00:15,000
This first subtitle will be shown for 10 seconds, <b>5 seconds</b> after the video has begun.

2
00:00:30,000 --> 00:00:45,000
The second subtitle will be shown for 15 seconds, <b>30 seconds</b> after the video has begun.
.```

The timestamp is in the following format: `hr:min:sec,ms –>  hr:min:sec,ms`. SubRip files also allow for basic HTML-style formatting; current options include font colours, italicized text, underlined text, bolded text, and the position of which text should appear on the line.
A convenient table for formatting is below.

**Bolded Text**:
- <b>your_bolded_text_goes_here</b>

*Italicized Text*:
- <i>your_italicized_text_goes_here</i>

__Underlined Text__:
- <u>your_underlined_text_goes_here</u>

Font Colour:
- <font color=”white”>your_white_text_goes_here</font>

### VTT Subtitles

Video Text Track (VTT) subtitles are also known as Web Video Text Track Subtitles (WebVTT) for HTML 5 video applications. Having said that, the format is based on the popular SubRip (SRT) format; this means that for the most part, the same formatting can be used from the table above (with the exception of the font colour tag; WebVTT replaces this with CSS and classes)!

An example for VTT subtitles can be seen below (NOTE sections denote comments that will not be read by the video player):

WEBVTT

NOTE This subtitle file is for demonstration purposes only; no real video exists that pairs with these subtitles.

00:00:05.000 --> 00:00:10.000

• This is a test set of subtitles.

00:00:15.000 --> 00:00:30.000

• They serve no use.
• These will run from 15 to 30 seconds into the video.

Classes (with the `<c></c>` tag) and CSS can also be used inside the VTT file for styling individual videos’ subtitles. CSS properties can be applied to all videos on a page by using the `::cue` selector on the actual page, rather than inside of the VTT file. For example, if you wanted to make all subtitles’ cues black, you could insert the following at the top of the page:

Other features supported by the WebVTT standard are “lyrical” subtitles; an example could be with the “Happy Birthday” song:

00:00:05.000 --> 00:00:15.000

• Happy Birthday to you! <00:10.500>Happy Birthday to you!

The following will display “Happy Birthday to you!” followed by “Happy Birthday to you!” again at the 10.5 second mark. The timestamp defined on the line must be within the constraints of the length of an individual line (the time inside must be after the five second mark and before the 15 second mark in this case).

### Conclusion

Videos on the web often have subtitles to improve accessibility to content; from WebVTT, to SubRip subtitles, they play a crucial role in both enhancing the user experience and enabling wide audiences to enjoy or view media.