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:
- Subtitle Number (incremental line by line)
- Timestamp (start and end time, accurate to milliseconds)
- Subtitle Content (can contain multiple lines of text)
- 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
- Example:
Timestamp: 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, indicating the start and end time of the subtitle.- Example:
00:00:01,000 --> 00:00:04,000
- Example:
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!
- Example:
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
- Example:
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
, whereHH
is hours,MM
is minutes,SS
is seconds, andmmm
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
- Example:
Subtitle Content: Subtitle text can include HTML tags for text formatting, such as bold (
<b>
), italic (<i>
), underline (<u>
), etc.- Example:plaintext
Hello, <b>friends!</b>
- Example:
Additional Features Supported by VTT
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:plaintextDefine
<c.red>Hello, friends!</c>
.red { color: red; }
in HTML, andHello, friends!
will appear in red.
- VTT supports text style adjustments via CSS, such as color, font size, position, etc. Styles can be defined in HTML using
Position Information:
- VTT supports setting specific positions for subtitles using attributes like
position
,line
, etc. - Example:plaintext
00:00:01.000 --> 00:00:04.000 position:90% line:10%
- VTT supports setting specific positions for subtitles using attributes like
Comments:
- VTT supports adding comments in the file, starting with
NOTE
. - Example:plaintext
NOTE This is a comment and will not be displayed.
- VTT supports adding comments in the file, starting with
Multi-language Support:
- VTT can support multiple language subtitles via metadata or HTML5's
<track>
tag.
- VTT can support multiple language subtitles via metadata or HTML5's
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. Thecontrols
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:
- [Script Info]: Basic information about the script, such as title, original subtitle author, etc.
- [V4+ Styles]: Subtitle style definitions; each style can be referenced by different subtitle lines.
- [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, usuallyv4.00+
.PlayResX
andPlayResY
: 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:
Name: Name of the style, used for reference.
- Example:
Default
, meaning this is the default style.
- Example:
Fontname: Font name.
- Example:
Arial
, subtitles will use Arial font.
- Example:
Fontsize: Font size.
- Example:
20
, font size is 20.
- Example:
PrimaryColour: Primary subtitle color, usually the main text color.
- Example:
&H00FFFFFF
, white font. Color value format is&HAABBGGRR
, whereAA
is transparency.
- Example:
SecondaryColour: Secondary subtitle color, often used for karaoke subtitle transition colors.
- Example:
&H0000FFFF
, blue.
- Example:
OutlineColour: Outline color.
- Example:
&H00000000
, black outline.
- Example:
BackColour: Background color, typically used when
BorderStyle=3
(subtitles with background box).- Example:
&H00000000
, black background.
- Example:
Bold: Bold setting.
- Example:
-1
for bold,0
for not bold.
- Example:
Italic: Italic setting.
- Example:
0
for not italic,-1
for italic.
- Example:
Underline: Underline setting.
- Example:
0
for no underline.
- Example:
StrikeOut: Strikethrough setting.
- Example:
0
for no strikethrough.
- Example:
ScaleX: Horizontal scaling percentage, 100 means normal scale.
- Example:
100
, no scaling.
- Example:
ScaleY: Vertical scaling percentage.
- Example:
100
, no scaling.
- Example:
Spacing: Character spacing.
- Example:
0
, no extra spacing.
- Example:
Angle: Subtitle rotation angle.
- Example:
0
, no rotation.
- Example:
BorderStyle: Border style, defines whether subtitles have outline or background box.
- Example:
1
means outline without background box,3
means with background box.
- Example:
Outline: Outline thickness.
- Example:
1
, outline thickness is 1.
- Example:
Shadow: Shadow depth.
- Example:
0
, no shadow.
- Example:
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
- Example:
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.
- Example:
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:
Layer: Layer, controls the stacking order of subtitles; higher numbers are on top.
- Example:
0
, default layer.
- Example:
Start: Subtitle start time, format
hours:minutes:seconds.milliseconds
.- Example:
0:00:01.00
, subtitle starts at 1 second.
- Example:
End: Subtitle end time.
- Example:
0:00:05.00
, subtitle ends at 5 seconds.
- Example:
Style: Name of the subtitle style used, referencing styles defined in [V4+ Styles].
- Example:
Default
, uses the style named Default.
- Example:
Name: Optional field, often used for character name labeling.
MarginL, MarginR, MarginV: Left, right, and vertical margins for the subtitle, overriding values defined in the style.
Effect: Subtitle effects, often used for karaoke subtitles, etc.
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 theAA
part is00
(fully transparent).Example:
plaintext&H00FFFFFF
- Here,
&H00FFFFFF
means fully transparent white. Transparency is00
(fully transparent), color isFFFFFF
(white).
- Here,
Fully Opaque: Color is completely opaque, i.e., the color appears most vivid. Represented as
&HFFBBGGRR
, where theAA
part isFF
(fully opaque).Example:
plaintext&HFF000000
- Here,
&HFF000000
means fully opaque black. Transparency isFF
(fully opaque), color is000000
(black).
- Here,
Actual Color Examples
Fully Transparent Red:
plaintext&H00FF0000
- Transparency
00
(fully transparent), colorFF0000
(red).
- Transparency
Fully Opaque Green:
plaintext&HFF00FF00
- Transparency
FF
(fully opaque), color00FF00
(green).
- Transparency
- In
&HAABBGGRR
, theAA
part controls transparency, andBB
,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.