srt / vtt / ass Subtitle Formats
SRT (SubRip Subtitle), VTT (WebVTT), and ASS (Advanced SubStation Alpha) are three very common subtitle formats. The following provides 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 extension .srt
, especially popular in video players and subtitle editors. Its basic structure includes subtitle number, timestamp, and subtitle text. Subtitle attributes cannot be directly defined through SRT (e.g., color, font), and they usually rely on the player's default settings or external style files to control them.
SRT Format Structure
Each subtitle block in an SRT file is arranged in the following format:
- Subtitle Number (incrementing line by line)
- Timestamp (display start and end times, accurate to milliseconds)
- Subtitle Content (can contain multiple lines of text)
- A blank line (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, what do you think?
Detailed Explanation
Subtitle Number: Each subtitle block has a unique number that increases sequentially. The number starts from 1 and must be an integer.
- Example:
1
- Example:
Timestamp: The format is
HH:MM:SS,mmm
, whereHH
is hours,MM
is minutes,SS
is seconds, andmmm
is milliseconds. The timestamp consists of two times separated by-->
, with a space on each side of the symbol, indicating the start and end times of the subtitle.- Example:
00:00:01,000 --> 00:00:04,000
- Example:
Subtitle Content: The subtitle text can contain one or more lines to be displayed on the video. SRT does not support formatting text, such as color or font size. These must be defined by player settings or additional style files.
- Example:
Hello my friend!
- Example:
SRT Format Limitations
- No Text Formatting: Cannot directly set colors, fonts, etc.; style adjustments require player settings or other tools.
VTT Subtitle Format
WebVTT (Web Video Text Tracks) is a subtitle format for HTML5 video elements, specifically designed for online videos. It is more powerful than SRT, supporting attributes like styles, annotations, multiple languages, and position information. The subtitle file extension is .vtt
. However, it cannot be directly embedded in videos; it must be referenced in the <video> element of an HTML file.
VTT Format Structure
VTT files are similar to SRT but with more features. A VTT file starts with WEBVTT
followed by one blank line, and it uses a .
(dot) symbol instead of ,
(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
Today's rain is <i>very, very heavy</i>.
Detailed Explanation
WEBVTT Declaration: All VTT files must start with
WEBVTT
to declare the file format.- Example:
WEBVTT
- Example:
Subtitle Number: The subtitle number is optional, unlike the required number in SRT format. It is used to distinguish the order of each subtitle segment, but it can be omitted in VTT.
Timestamp: The format is
HH:MM:SS.mmm
, whereHH
is hours,MM
is minutes,SS
is seconds, andmmm
is milliseconds. A.
(period) is used to separate seconds and milliseconds, not,
. The timestamp consists of two times separated by-->
, with a space on each side.- Example:
00:00:01.000 --> 00:00:04.000
- Example:
Subtitle Content: The subtitle text can contain HTML tags to format the text, such as bold (
<b>
), italic (<i>
), and underline (<u>
).- Example:plaintext
Hello, <b>friends!</b>
- Example:
Other Features Supported by VTT
Styles (CSS):
- VTT supports text style adjustments via CSS, such as color, font size, and position. Styles can be defined in HTML using the
<style>
tag or external CSS files. - Example:plaintextIn HTML, define
<c.red>Hello friends!</c>
.red { color: red; }
, thenHello, world!
will be displayed in red.
- VTT supports text style adjustments via CSS, such as color, font size, and position. Styles can be defined in HTML using the
Position Information:
- VTT supports setting the specific position of subtitles via attributes such as
position
andline
. - Example:plaintext
00:00:01.000 --> 00:00:04.000 position:90% line:10%
- VTT supports setting the specific position of subtitles via attributes such as
Annotations:
- VTT supports adding annotations to the file, starting with
NOTE
. - Example:plaintext
NOTE This line is a comment and will not be displayed.
- VTT supports adding annotations to the file, starting with
Multiple Language Support:
- VTT can support multiple language subtitles through metadata or HTML5's
<track>
tag.
- VTT can support multiple language subtitles through metadata or HTML5's
Advantages of VTT Format
- Text Formatting: Supports HTML tags for simple text formatting, such as bold and italics.
- Styling and Positioning: Allows setting the style and position of subtitles via CSS.
- Annotations and Metadata: Supports adding annotation information without affecting subtitle display.
- Web Compatibility: Specifically designed for HTML5 video, suitable for web environments.
SRT vs. VTT Comparison
Feature | SRT | VTT |
---|---|---|
File Header | None | WEBVTT followed by one 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 | No | Yes, supports HTML tags like <b> , <i> |
Subtitle Number | Required | Optional |
Style and Position Support | Relies on player or external style files | Built-in CSS style support, supports position information |
Annotations | No | Supports NOTE annotations |
Advanced Features Supported | Basic subtitle features only | Supports karaoke, annotations, styles, etc. |
Use Cases | Local video files, simple subtitle display | HTML5 video, online subtitles, complex subtitle display |
Embedded in video | Can be embedded in video files | Cannot be embedded in video, only used within the webpage's <video> element |
VTT (WebVTT) subtitle format cannot be directly embedded into MP4 files, but VTT files can be associated with MP4 videos via HTML5's
<track>
tag. When the MP4 is opened in a browser, these associated subtitles can be displayed correctly.
Using VTT Subtitles to Play MP4 in a Browser
In HTML5, you can load an MP4 video using the <video>
element and associate VTT subtitles with the video 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 the video file. Thecontrols
attribute allows the user to control video playback (play/pause, etc.).<source>
: Defines the path and type of the video file, using MP4 here.<track>
: Defines the subtitle file, thesrc
attribute points to the path of the VTT file,kind="subtitles"
indicates that it is a subtitle,srclang
specifies the language of the subtitle (zh
for Chinese), andlabel
gives the subtitle track a descriptive label.
Store the HTML file and the related video and subtitle files in the same directory. Then, open the HTML file (e.g., index.html
) through a browser, and you will see the video player. The subtitles will be displayed automatically when you click play (if the player supports it and the user turns on subtitles).
Most modern browsers and video players support subtitle switching. You can select different subtitles (if there are multiple subtitle tracks) through the subtitle button in the video control bar.
VTT Subtitle Notes
Browser Compatibility: Almost all modern browsers (such as Chrome, Firefox, Edge, etc.) support the
<video>
element and WebVTT subtitles. As long as the VTT file and MP4 file are correctly associated, the subtitles should be displayed when the video is played in the browser.Cannot Be Directly Embedded in MP4 Files: 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 need to be used and associated through the HTML5
<track>
tag.VTT Subtitle Styles: In browsers, WebVTT subtitles can be styled to a certain extent via CSS. If you need to customize the appearance of subtitles, you can further modify the styles via JavaScript and CSS.
ASS Subtitle Format
ASS (Advanced SubStation Alpha) is a feature-rich subtitle format widely used in anime, karaoke subtitles, and other scenarios that require complex subtitle effects. It supports rich style control, including fonts, colors, position, shadows, and outlines.
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,黑体,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 over many previously undiscovered photos.
ASS Subtitle Structure
A standard ASS subtitle file contains several parts:
- [Script Info]: Basic information about the script, such as title and original subtitle author.
- [V4+ Styles]: Subtitle style definitions, where each style can be referenced by different subtitle lines.
- [Events]: Actual subtitle events, defining the appearance time, disappearance time, and specific content of the subtitles.
1. [Script Info] Section
This section contains the metadata of the subtitle file, defining some basic information about the subtitles.
[Script Info]
Title: Subtitle Title
Original Script: Subtitle Author
ScriptType: v4.00+
PlayDepth: 0
PlayResX: 1920
PlayResY: 1080
ScaledBorderAndShadow: yes
YCbCr Matrix: None
Title
: The title of the subtitle file.Original Script
: The author information of the original subtitles.ScriptType
: Defines the script version, usuallyv4.00+
.PlayResX
andPlayResY
: Define the video resolution, indicating the display effect of the subtitles at this resolution.PlayDepth
: The color depth of the video, generally 0.ScaledBorderAndShadow
: Specifies whether the border (Outline) and shadow (Shadow) of the subtitle are scaled according to the screen resolution.yes
means yes,no
means no scaling.YCbCr Matrix
: Specifies the YCbCr matrix used for color conversion. In video processing and subtitle rendering, YCbCr is a color space commonly used for video encoding and decoding. This setting may affect the display effect of subtitles in different color spaces.
2. [V4+ Styles] Section
This section defines the style of the subtitles, where each style can control the font, color, shadow, etc. of the subtitles through fields. The 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 Explanation:
Name: The name of the style, used for referencing.
- Example:
Default
, indicating this is the default style.
- Example:
Fontname: Font name.
- Example:
Arial
, the subtitles will use the Arial font.
- Example:
Fontsize: Font size.
- Example:
20
, the font size is 20.
- Example:
PrimaryColour: Primary subtitle color, representing the main color of the subtitles (usually the displayed text color).
- Example:
&H00FFFFFF
, white font. The color value format is&HAABBGGRR
, whereAA
is transparency.
- Example:
SecondaryColour: Secondary subtitle color, usually used for the transition color of karaoke subtitles.
- Example:
&H0000FFFF
, blue.
- Example:
OutlineColour: Outline color.
- Example:
&H00000000
, black outline.
- Example:
BackColour: Background color, usually used when
BorderStyle=3
(subtitles with background box).- Example:
&H00000000
, black background.
- Example:
Bold: Bold setting.
- Example:
-1
indicates bold,0
indicates non-bold.
- Example:
Italic: Italic setting.
- Example:
0
indicates non-italic,-1
indicates italic.
- Example:
Underline: Underline setting.
- Example:
0
indicates no underline.
- Example:
StrikeOut: Strikethrough setting.
- Example:
0
indicates no strikethrough.
- Example:
ScaleX: Horizontal scaling ratio, 100 indicates normal ratio.
- Example:
100
, indicating no scaling.
- Example:
ScaleY: Vertical scaling ratio.
- Example:
100
, indicating no scaling.
- Example:
Spacing: Character spacing.
- Example:
0
, indicating no extra spacing.
- Example:
Angle: Subtitle rotation angle.
- Example:
0
, indicating no rotation.
- Example:
BorderStyle: Border style, defining whether the subtitles have an outline or background box.
- Example:
1
indicates there is an outline but no background box,3
indicates there is a background box.
- Example:
Outline: Outline thickness.
- Example:
1
, indicating the outline thickness is 1.
- Example:
Shadow: Shadow depth.
- Example:
0
, indicating no shadow.
- Example:
Alignment: Subtitle alignment, using numbers 1-9 to define different alignment positions.
- Example:
2
, indicating subtitles are center-aligned.
Alignment Explanation:
- 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
- Example:
MarginL, MarginR, MarginV: Left, right, and vertical margins, in pixels.
- Example:
10, 10, 20
, indicating the left and right margins are 10 pixels, and the vertical margin is 20 pixels.
- Example:
Encoding: Encoding format,
1
indicates ANSI encoding,0
indicates default encoding.
3. [Events] Section
This section defines the actual subtitle events, including timestamps, subtitle content, and the style 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 line of subtitles
Dialogue: 0,0:00:06.00,0:00:10.00,Default,,0,0,0,,This is the second line of subtitles
Field Explanation:
Layer: Layer, controlling the stacking order of the subtitles, the larger the number, the higher the level.
- Example:
0
, indicating the default level.
- Example:
Start: Subtitle start time, the format is
hours:minutes:seconds.milliseconds
.- Example:
0:00:01.00
, indicating the subtitles start at 1 second.
- Example:
End: Subtitle end time.
- Example:
0:00:05.00
, indicating the subtitles end at 5 seconds.
- Example:
Style: The name of the subtitle style used, referencing the style defined in [V4+ Styles].
- Example:
Default
, using the style named Default.
- Example:
Name: Optional field, usually used for character name annotations.
MarginL, MarginR, MarginV: The left, right, and vertical margins of the subtitles, overriding the values defined in the style.
Effect: Subtitle effects, usually used for karaoke subtitles, etc.
Text: The actual content of the subtitles, you can use ASS format control codes to achieve line breaks, special styles and 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 line of subtitles
{\pos(960,540)}
: Controls the subtitle to be displayed at a specific position on the screen (960 pixels horizontally, 540 pixels vertically).This is the first line of subtitles
: The actual subtitle text displayed.
Color Settings in ASS
Taking &HAABBGGRR
as an example, &HAABBGGRR
is a hexadecimal format used to represent colors, which includes the transparency of the color and the value of the color itself. This format is used to define subtitle color attributes, such as PrimaryColour
, OutlineColour
, and BackColour
.
The meaning is as follows:
AA
: Transparency (Alpha channel), indicating the transparency of the color.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 directly ignore the value in the AA position, for example,
&HBBGGRR
is sufficient.
Transparency and Color Values
Fully Transparent: The color is completely transparent, i.e., invisible. The representation is
&H00BBGGRR
, where theAA
part is00
(completely transparent).Example:
plaintext&H00FFFFFF
- Here,
&H00FFFFFF
represents completely transparent white. The transparency is00
(completely transparent), and the color isFFFFFF
(white).
- Here,
Fully Opaque: The color is completely opaque, i.e., the color display effect is the most obvious. The representation is
&HFFBBGGRR
, where theAA
part isFF
(completely opaque).Example:
plaintext&HFF000000
- Here,
&HFF000000
represents completely opaque black. The transparency isFF
(completely opaque), and the color is000000
(black).
- Here,
Actual Color Examples
Fully transparent red:
plaintext&H00FF0000
- Transparency
00
(completely transparent), colorFF0000
(red).
- Transparency
Fully opaque green:
plaintext&HFF00FF00
- Transparency
FF
(completely opaque), color00FF00
(green).
- Transparency
- The
AA
part in&HAABBGGRR
controls transparency, and theBB
,GG
,RR
parts control color. - Fully transparent: Transparency
00
, for example,&H00FF0000
represents fully transparent red. - Fully opaque: Transparency
FF
, for example,&HFFFF0000
represents fully opaque red.