srt / vtt / ass subtitle formats

SRT (SubRip Subtitle), VTT (WebVTT), and ASS (Advanced SubStation Alpha) are three very common subtitle formats. Below is a detailed introduction to each subtitle format, including their attributes and settings.

SRT Subtitle Format

SRT is a simple and widely used subtitle format with the file extension .srt. It is especially popular in video players and subtitle editors. Its basic structure includes subtitle number, timestamp, and subtitle text. Subtitle attributes (such as color, font) cannot be defined directly in SRT; they usually rely on the player's default settings or external style files for control.

SRT Format Structure

Each subtitle block in an SRT file is arranged in the following format:

1. Subtitle Number (incremental line by line)
2. Timestamp (start and end time, accurate to milliseconds)
3. Subtitle Content (can contain multiple lines of text)
4. A blank line (used to separate subtitle blocks)

SRT Example

1
00:00:01,000 --> 00:00:04,000
Hello, my friend!

2
00:00:05,000 --> 00:00:08,000
The weather is nice today, don't you think?

Detailed Explanation

• Subtitle Number: Each subtitle block has a unique number, incrementing sequentially. The numbering starts from 1 and must be an integer.

  • Example: 1

• Timestamp: Format is HH:MM:SS,mmm, where HH is hours, MM is minutes, SS is seconds, and mmm is milliseconds. The timestamp consists of two times separated by --> with a space on each side, indicating the start and end time of the subtitle.

  • Example: 00:00:01,000 --> 00:00:04,000

• Subtitle Content: Subtitle text can contain one or more lines and is displayed on the video. SRT does not support formatted text, such as color, font size, etc. These must be defined through player settings or additional style files.

  • Example: Hello, my friend!

SRT Format Limitations

• No text formatting support: Cannot directly set color, font, etc.; requires player or other tools for style adjustments.

---

VTT Subtitle Format

WebVTT (Web Video Text Tracks) is a subtitle format for HTML5 video elements, designed specifically for web videos. It is more powerful than SRT, supporting styles, comments, multiple languages, position information, and other attributes. The file extension is .vtt. However, it cannot be directly embedded in videos; it must be referenced in HTML's <video> element.

VTT Format Structure

VTT files are similar to SRT but with more features. A VTT file starts with WEBVTT followed by a blank line and uses a period . instead of a comma , to separate seconds and milliseconds.

VTT Example

WEBVTT

1
00:00:01.000 --> 00:00:04.000
Hello, <b>friends!</b>

2
00:00:05.000 --> 00:00:08.000
The rain today is <i>very, very heavy</i>.

Detailed Explanation

• WEBVTT Declaration: All VTT files must start with WEBVTT to declare the file format.

  • Example: WEBVTT

• Subtitle Number: Subtitle numbers are optional, unlike in SRT where they are required. They help distinguish the order of each subtitle segment but can be omitted in VTT.

• Timestamp: Format is HH:MM:SS.mmm, where HH is hours, MM is minutes, SS is seconds, and mmm is milliseconds. Use a period . to separate seconds and milliseconds, not a comma ,. The timestamp consists of two times separated by --> with a space on each side.

  • Example: 00:00:01.000 --> 00:00:04.000

• Subtitle Content: Subtitle text can include HTML tags for text formatting, such as bold (<b>), italic (<i>), underline (<u>), etc.

  • Example:

    Hello, <b>friends!</b>

Additional Features Supported by VTT

1. Styles (CSS):

   • VTT supports text style adjustments via CSS, such as color, font size, position, etc. Styles can be defined in HTML using <style> tags or external CSS files.
   • Example:

     <c.red>Hello, friends!</c>

     Define .red { color: red; } in HTML, and Hello, friends! will appear in red.

2. Position Information:

   • VTT supports setting specific positions for subtitles using attributes like position, line, etc.
   • Example:

     00:00:01.000 --> 00:00:04.000 position:90% line:10%

3. Comments:

   • VTT supports adding comments in the file, starting with NOTE.
   • Example:

     NOTE This is a comment and will not be displayed.

4. Multi-language Support:

   • VTT can support multiple language subtitles via metadata or HTML5's <track> tag.

Advantages of VTT Format

• Text Formatting: Supports HTML tags for simple text formatting like bold, italic, etc.
• Styles and Positioning: CSS can be used to set subtitle styles and positions.
• Comments and Metadata: Supports adding comments without affecting subtitle display.
• Web Compatibility: Designed for HTML5 video, suitable for web environments.

---

Comparison of SRT and VTT

Feature	SRT	VTT
File Header	None	WEBVTT followed by a blank line
Timestamp Format	HH:MM:SS,mmm, comma separates seconds and milliseconds	HH:MM:SS.mmm, period separates seconds and milliseconds
Text Formatting Support	Not supported	Supports HTML tags like <b>, <i>
Subtitle Number	Required	Optional
Style and Position Support	Depends on player or external style files	Built-in CSS support, supports position info
Comments	Not supported	Supports NOTE comments
Advanced Features	Basic subtitle functions only	Supports karaoke, comments, styles, etc.
Use Cases	Local video files, simple subtitle display	HTML5 video, web subtitles, complex subtitle display
Embeddable in Video	Can be embedded in video files	Cannot be embedded; only used with web <video> elements

VTT (WebVTT) subtitle format cannot be directly embedded into MP4 files, but VTT files can be associated with MP4 videos using HTML5's <track> tag. When playing MP4 in a browser, these associated subtitles can display normally.

Using VTT Subtitles to Play MP4 in Browser

In HTML5, you can load an MP4 video using the <video> element and associate VTT subtitles with it using the <track> element.

HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <video controls width="600">
        <source src="video.mp4" type="video/mp4">
        <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="Simplified Chinese">
        Your browser does not support the video tag.
    </video>
</body>
</html>

HTML Element Explanation

• <video>: Used to embed video files. The controls attribute allows users to control video playback (play/pause, etc.).
• <source>: Defines the path and type of the video file, here using MP4.
• <track>: Defines the subtitle file, src attribute points to the VTT file path, kind="subtitles" indicates it's a subtitle, srclang specifies the subtitle language (zh for Chinese), label gives a descriptive label to the subtitle track.

Store the HTML file and related video and subtitle files in the same directory. Then, open the HTML file (e.g., index.html) in a browser, and you will see the video player. When you click play, subtitles will automatically display (if the player supports it and the user has subtitles enabled).

Most modern browsers and video players support subtitle switching. You can select different subtitles (if multiple tracks exist) via the subtitle button in the video control bar.

VTT Subtitle Notes

• Browser Compatibility: Almost all modern browsers (e.g., Chrome, Firefox, Edge) support the <video> element and WebVTT subtitles. As long as the VTT file and MP4 file are correctly associated, subtitles should display when playing the video in a browser.

• Cannot Embed Directly in MP4: VTT subtitle files cannot be directly embedded into MP4 files like SRT or other subtitle formats. MP4 files themselves do not contain VTT subtitle tracks. External subtitle files must be used and associated via HTML5 <track> tags.

• VTT Subtitle Styles: In browsers, WebVTT subtitles can be styled to some extent via CSS. If custom subtitle appearance is needed, styles can be further modified using JavaScript and CSS.

---

ASS Subtitle Format

ASS (Advanced SubStation Alpha) is a feature-rich subtitle format widely used for anime, karaoke subtitles, and other scenarios requiring complex subtitle effects. It supports rich style controls, including font, color, position, shadow, outline, and more.

Below is an example of an ASS subtitle.

[Script Info]
; Script generated by FFmpeg/Lavc60.27.100
ScriptType: v4.00+
PlayResX: 384
PlayResY: 288
ScaledBorderAndShadow: yes
YCbCr Matrix: None

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,SimHei,16,&hffffff,&HFFFFFF,&h000000,&H0,0,0,0,0,100,100,0,0,1,1,0,2,10,10,10,1
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.95,0:00:04.93,Default,,0,0,0,,This is an ancient galaxy,
Dialogue: 0,0:00:05.42,0:00:08.92,Default,,0,0,0,,We have been observing it for several years,
Dialogue: 0,0:00:09.38,0:00:13.32,Default,,0,0,0,,The Webb telescope recently sent back many previously undiscovered photos.

ASS Subtitle Structure

A standard ASS subtitle file contains multiple sections:

1. [Script Info]: Basic information about the script, such as title, original subtitle author, etc.
2. [V4+ Styles]: Subtitle style definitions; each style can be referenced by different subtitle lines.
3. [Events]: Actual subtitle events, defining the appearance time, disappearance time, and specific content of subtitles.

---

1. [Script Info] Section

This section contains metadata of the subtitle file, defining some basic information about the subtitles.

[Script Info]
Title: Subtitle Title
date: 2024-01-22 14:33:00
description: 
Original Script: Subtitle Author
ScriptType: v4.00+
PlayDepth: 0
PlayResX: 1920
PlayResY: 1080
ScaledBorderAndShadow: yes
YCbCr Matrix: None

• Title: Title of the subtitle file.
• Original Script: Information about the original subtitle author.
• ScriptType: Defines the script version, usually v4.00+.
• PlayResX and PlayResY: Define the video resolution, indicating how subtitles appear at that resolution.
• PlayDepth: Video color depth, generally 0.
• ScaledBorderAndShadow: Specifies whether to scale the subtitle outline and shadow according to the screen resolution. yes for yes, no for no scaling.
• YCbCr Matrix: Specifies the YCbCr matrix used for color conversion. In video processing and subtitle rendering, YCbCr is a color space often used for video encoding and decoding. This setting may affect subtitle display under different color spaces.

---

2. [V4+ Styles] Section

This section defines subtitle styles. Each style controls font, color, shadow, etc., through fields. Format is as follows:

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,Arial,20,&H00FFFFFF,&H0000FFFF,&H00000000,&H00000000,-1,0,0,0,100,100,0,0,1,1,0,2,10,10,20,1

Field Explanations:

1. Name: Name of the style, used for reference.

   • Example: Default, meaning this is the default style.

2. Fontname: Font name.

   • Example: Arial, subtitles will use Arial font.

3. Fontsize: Font size.

   • Example: 20, font size is 20.

4. PrimaryColour: Primary subtitle color, usually the main text color.

   • Example: &H00FFFFFF, white font. Color value format is &HAABBGGRR, where AA is transparency.

5. SecondaryColour: Secondary subtitle color, often used for karaoke subtitle transition colors.

   • Example: &H0000FFFF, blue.

6. OutlineColour: Outline color.

   • Example: &H00000000, black outline.

7. BackColour: Background color, typically used when BorderStyle=3 (subtitles with background box).

   • Example: &H00000000, black background.

8. Bold: Bold setting.

   • Example: -1 for bold, 0 for not bold.

9. Italic: Italic setting.

   • Example: 0 for not italic, -1 for italic.

10. Underline: Underline setting.

    • Example: 0 for no underline.

11. StrikeOut: Strikethrough setting.

    • Example: 0 for no strikethrough.

12. ScaleX: Horizontal scaling percentage, 100 means normal scale.

    • Example: 100, no scaling.

13. ScaleY: Vertical scaling percentage.

    • Example: 100, no scaling.

14. Spacing: Character spacing.

    • Example: 0, no extra spacing.

15. Angle: Subtitle rotation angle.

    • Example: 0, no rotation.

16. BorderStyle: Border style, defines whether subtitles have outline or background box.

    • Example: 1 means outline without background box, 3 means with background box.

17. Outline: Outline thickness.

    • Example: 1, outline thickness is 1.

18. Shadow: Shadow depth.

    • Example: 0, no shadow.

19. Alignment: Subtitle alignment, using numbers 1-9 to define different alignment positions.

    • Example: 2, center-bottom alignment.

    Alignment explanations:

    • 1: Bottom-left
    • 2: Bottom-center
    • 3: Bottom-right
    • 4: Middle-left
    • 5: Center
    • 6: Middle-right
    • 7: Top-left
    • 8: Top-center
    • 9: Top-right

20. MarginL, MarginR, MarginV: Left, right, and vertical margins in pixels.

    • Example: 10, 10, 20, meaning left and right margins are 10 pixels, vertical margin is 20 pixels.

21. Encoding: Encoding format, 1 for ANSI encoding, 0 for default encoding.

---

3. [Events] Section

This section defines actual subtitle events, including timestamps, subtitle content, and styles used.

[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.00,0:00:05.00,Default,,0,0,0,,This is the first subtitle line
Dialogue: 0,0:00:06.00,0:00:10.00,Default,,0,0,0,,This is the second subtitle line

Field Explanations:

1. Layer: Layer, controls the stacking order of subtitles; higher numbers are on top.

   • Example: 0, default layer.

2. Start: Subtitle start time, format hours:minutes:seconds.milliseconds.

   • Example: 0:00:01.00, subtitle starts at 1 second.

3. End: Subtitle end time.

   • Example: 0:00:05.00, subtitle ends at 5 seconds.

4. Style: Name of the subtitle style used, referencing styles defined in [V4+ Styles].

   • Example: Default, uses the style named Default.

5. Name: Optional field, often used for character name labeling.

6. MarginL, MarginR, MarginV: Left, right, and vertical margins for the subtitle, overriding values defined in the style.

7. Effect: Subtitle effects, often used for karaoke subtitles, etc.

8. Text: Actual subtitle content, can use ASS format control codes for line breaks, special styles, positioning, etc.

---

Example Subtitle Event

Dialogue: 0,0:00:01.00,0:00:05.00,Default,,0,0,0,,{\pos(960,540)}This is the first subtitle line

• {\pos(960,540)}: Controls subtitle display at a specific screen position (horizontal 960 pixels, vertical 540 pixels).
• This is the first subtitle line: Actual displayed subtitle text.

---

Color Settings in ASS

Taking &HAABBGGRR as an example, &HAABBGGRR is a hexadecimal format used to represent colors, including transparency and the color value itself. This format is used to define subtitle color attributes like PrimaryColour, OutlineColour, and BackColour.

Meaning:

• AA: Transparency (Alpha channel), indicates color transparency.
• BB: Blue component.
• GG: Green component.
• RR: Red component.

The specific byte order is: Alpha (transparency) - Blue - Green - Red.

If you don't want to use transparency, you can ignore the value in the AA position, e.g., &HBBGGRR is sufficient.

Transparency and Color Values

• Fully Transparent: Color is completely transparent, i.e., invisible. Represented as &H00BBGGRR, where the AA part is 00 (fully transparent).

  Example:

  &H00FFFFFF

  • Here, &H00FFFFFF means fully transparent white. Transparency is 00 (fully transparent), color is FFFFFF (white).

• Fully Opaque: Color is completely opaque, i.e., the color appears most vivid. Represented as &HFFBBGGRR, where the AA part is FF (fully opaque).

  Example:

  &HFF000000

  • Here, &HFF000000 means fully opaque black. Transparency is FF (fully opaque), color is 000000 (black).

Actual Color Examples

1. Fully Transparent Red:

   &H00FF0000

   • Transparency 00 (fully transparent), color FF0000 (red).

2. Fully Opaque Green:

   &HFF00FF00

   • Transparency FF (fully opaque), color 00FF00 (green).

• In &HAABBGGRR, the AA part controls transparency, and BB, GG, RR parts control the color.
• Fully Transparent: Transparency 00, e.g., &H00FF0000 means fully transparent red.
• Fully Opaque: Transparency FF, e.g., &HFFFF0000 means fully opaque red.