Subtitling: A Guide to SRT, WebVTT, & SAMI
If one uses the internet to view forms of media including music, television, or even some video games, one may notice that subtitles are commonly included. Not only that, but in many cases, these subtitles have formatting that includes colouring, fonts, italicisation, and various other features!
In this simple demo, I will explain the three most popular of these formats in detail, going over the benefits and downsides of each methodology.
SRT - SubRip Subtitles
Subtitle files in the SRT file format are popular because the format is both easily readable and natively supported by the Windows operating system. SRT handles text formatting through the use of HTML tags, meaning several more advanced features like italicisation or having no subtitles on screen during periods of silence are fast and easy to implement.
While the SRT format is simple and intuitive to work with, each subtitle is numbered which makes splitting one subtitle into multiple more hassle than is the case for the WebVTT and SAMI formats. Additionally, including multiple language tracks in one subtitle file nor repositioning subtitles are officially supported by the SRT format.
Esthero - Country Living: SRT Subtitle File
1 00:00:28,000 --> 00:00:34,750 The world I know is a world too slow 2 00:00:34,750 --> 00:00:41,500 If you don't move fast enough, keep your head low 3 00:00:41,500 --> 00:00:46,000 The world I know is a world much too slow 4 00:00:46,000 --> 00:00:54,333 If you can't move fast enough child, better stay on the low child 5 00:00:54,333 --> 00:01:00,000 And I want to lay in the passenger seat of a car 6 00:01:00,000 --> 00:01:02,000 We could drive around all night 7 00:01:02,000 --> 00:01:09,000 We wouldn't have to go too far, just look at the stars 8 00:01:12,000 --> 00:01:15,000 This night could be ours 9 00:01:19,100 --> 00:01:26,000 The world I know is a world too slow 10 00:01:26,000 --> 00:01:32,000 If you don't move fast enough, keep your head low 11 00:01:32,000 --> 00:01:37,800 The world I know is a world much too slow 12 00:01:37,800 --> 00:01:44,000 If you can't move fast enough child, better stay on the low child 13 00:01:44,900 --> 00:01:50,000 And I want a life lover that'll go that far 14 00:01:50,000 --> 00:01:54,000 We don't have to do this right 15 00:01:54,000 --> 00:01:56,750 Do you know who you are 16 00:01:56,750 --> 00:02:07,000 This ride could be ours, just look at those stars 17 00:02:11,850 --> 00:02:15,300 And we are never going home 18 00:02:15,300 --> 00:02:22,000 This ride is far too long to travel alone 19 00:02:22,000 --> 00:02:32,000 And the moon will shine brightly on this road 20 00:02:32,000 --> 00:02:37,000 Which way do you want to go? 21 00:02:39,000 --> 00:02:45,500 The world I know is a world too slow 22 00:02:45,500 --> 00:02:51,333 If you don't move fast enough, keep your head low 23 00:02:51,333 --> 00:02:57,200 The world I know is a world much too slow 24 00:02:57,200 --> 00:03:05,000 If you can't move fast enough child, better stay on the low child 25 00:03:05,000 --> 00:03:10,200 And I want a life lover that'll go that far 26 00:03:10,200 --> 00:03:13,400 We don't have to do this right 27 00:03:13,400 --> 00:03:15,750 Yes I know who you are 28 00:03:15,750 --> 00:03:26,000 This ride could be ours, just look at those stars 29 00:03:28,200 --> 00:03:32,900 Just look at those stars 30 00:03:35,333 --> 00:03:38,800 Baby we could be stars
WebVTT - Web Video Text Tracks
WebVTT is an increasingly popular set of changes and additions to the older SRT file format, making WebVTT rather similar to SRT. However, additional features like compatibility with HTML, CSS, and JSON alongside native support for advanced features like metadata and subtitles that consist of graphics instead of text make working with the format more complicated.
Despite the wide array of added functionality and being natively supported by the majority of web browsers, WebVTT still lacks the ability to add multiple language tracks into a single file like the SAMI format can.
Esthero - Country Livin’: WebVTT Subtitle File
WEBVTT
NOTE
Country Livin' by Esthero - Lyrics
STYLE
::cue(v[voice="CHORUS"]) { font-style: bold }
::cue(v[voice="CHORUS"]) { font-style: italic }
::cue(i) { color: black }
Chorus 1
00:28.000 --> 00:34.750
<v CHORUS>The world I know is a world too slow
Chorus 2
00:34.750 --> 00:41.500
<v CHORUS>If you don't move fast enough, keep your head low
Chorus 3
00:41.500 --> 00:46.000
<v CHORUS>The world I know is a world much too slow
Chorus 4
00:46.000 --> 00:54.333
<v CHORUS>If you can't move fast enough child, better stay on the low child
Verse 1
00:54.333 --> 01:00.000
<v VERSE>And I want to lay in the passenger seat of a car
Verse 2
01:00.000 --> 00:02.000
<v VERSE>We could drive around all night
Verse 3
01:02.000 --> 01:09.000
<v VERSE>We wouldn't have to go too far, just look at the stars
Verse 4
01:12.000 --> 01:15.000
<v VERSE>This night could be ours
Chorus 5
01:19.100 --> 01:26.000
<v CHORUS>The world I know is a world too slow
Chorus 6
01:26.000 --> 01:32.000
<v CHORUS>If you don't move fast enough, keep your head low
Chorus 7
01:32.000 --> 01:37.800
<v CHORUS>The world I know is a world much too slow
Chorus 8
01:37.800 --> 01:44.000
<v CHORUS>If you can't move fast enough child, better stay on the low child
Verse 5
01:44.900 --> 01:50.000
<v VERSE>And I want a life lover that'll go that far
Verse 6
01:50.000 --> 01:54.000
<v VERSE>We don't have to do this right
Verse 7
01:54.000 --> 01:56.750
<v VERSE>Do you know who you are
Verse 8
01:56.750 --> 02:07.000
<v VERSE>This ride could be ours, just look at those stars
Refrain 1
02:11.850 --> 02:15.300
<v VERSE>And we are never going home
Refrain 2
02:15.300 --> 02:22.000
<v VERSE>This ride is far too long to travel alone
Refrain 3
02:22.000 --> 02:32.000
<v VERSE>And the moon will shine brightly on this road
Refrain 4
02:32.000 --> 02:37.000
<v VERSE>Which way do you want to go?
Chorus 9
02:39.000 --> 02:45.500
<v CHORUS>The world I know is a world too slow
Chorus 10
02:45.500 --> 02:51.333
<v CHORUS>If you don't move fast enough, keep your head low
Chorus 11
02:51.333 --> 02:57.200
<v CHORUS>The world I know is a world much too slow
Chorus 12
02:57.200 --> 03:05.000
<v CHORUS>If you can't move fast enough child, better stay on the low child
Verse 9
03:05.000 --> 03:10.200
<v VERSE>And I want a life lover that'll go that far
Verse 10
03:10.200 --> 03:13.400
<v VERSE>We don't have to do this right
Verse 11
03:13.400 --> 03:15.750
<v VERSE>Yes I know who you are
Verse 12
03:15.750 --> 03:26.000
<v VERSE>This ride could be ours, just look at those stars
Outro 1
03:28.200 --> 03:32.900
<v VERSE>Just look at those stars
Outro 2
03:35.333 --> 03:38.800
<v VERSE>Baby we could be stars
SAMI - Synchronized Accessible Media Interchange
SAMI files, saved using the .sami or .smi file extensions, are a legacy subtitle format used primarily in the modern day for the purposes of creating multilingual subtitle files. Unlike SRT and WebVTT, SAMI natively supports single subtitle files with multiple tracks for different languages or even different text formatting. In addition to this, SAMI retains most of the advanced formatting features supported by the WebVTT format.
Despite SAMI’s utility, the format is no longer widely supported and is more difficult for a human to read by comparison to SRT and WebVTT subtitle files. Furthermore, SAMI is only compatible with some CSS features, unlike WebVTT which can exploit every tool provided by CSS.
Country Livin’ - Esthero: SAMI Subtitle File
<SAMI>
<HEAD>
<TITLE>Esthero - Country Livin'</TITLE>
<SAMIParam>
Media {Country_Livin.flac}
Metrics {time:ms;}
Spec {MSFT:1.0;}
</SAMIParam>
<STYLE TYPE="text/css">
<!--
P { font-family: Arial; font-size: 12pt; font-weight: normal; color: white; background-color: black; text-align: center; }
#Chorus { font-family: Arial; font-size: 12pt; font-weight: bold; color: white; background-color: black; text-align: center; }
.ENCC { name: English; lang: en-US ; SAMIType: CC ; }
.FRCC { name: Français; lang: fr-FR ; SAMIType: CC ; }
.DEUT { name: Deutsch; lang: de-DE ; SAMIType: CC ; }
.JPCC { name: 日本語; lang: ja-JP ; SAMIType: CC ; }
-->
</STYLE>
</HEAD>
<BODY>
<SYNC Start=28000>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>The world I know is a world too slow</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Le monde que je connais est un monde trop lent</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Die Welt, die ich kenne, ist eine Welt, die zu langsam geht</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>この世界は 遅い世界だ</P>
</SYNC>
<SYNC Start=34750>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>If you don't move fast enough, keep your head low</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Si vous ne bougez pas assez vite, gardez la tête basse</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Wenn du dich nicht schnell genug bewegst, Halte deinen Kopf tief</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>足を速めないと、 頭を低くしなさい</P>
</SYNC>
<SYNC Start=41500>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>The world I know is a world much too slow</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Le monde que je connais est un monde beaucoup trop lent</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Die Welt, die ich kenne, ist eine Welt, die viel zu langsam geht</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>この世界は 遅すぎる世界だ</P>
</SYNC>
<SYNC Start=46000>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>If you can't move fast enough child, better stay on the low child</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Si vous ne pouvez pas bouger assez vite enfant, mieux vaut rester sur le bas chemin enfant</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Wenn du dich nicht schnell genug kind, bleib lieber auf dem Boden</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>速く走れないなら、子供よ、低くしまおう</P>
</SYNC>
<SYNC Start=54333>
<P Class=ENCC>And I want to lay in the passenger seat of a car</P>
<P Class=FRCC>Et j'aimerais m'étendre à côté du conducteur d'une voiture</P>
<P Class=DEUT>Und ich möchte im Beifahrersitz eines Autos liegen</P>
<P Class=JPCC>車の乗用席で 寝たいわ</P>
</SYNC>
<SYNC Start=60000>
<P Class=ENCC>We could drive around all night</P>
<P Class=FRCC>Nous pourrions rouler toute la nuit</P>
<P Class=DEUT>Wir könnten die ganze Nacht fahren</P>
<P Class=JPCC>夜中までドライブしよう</P>
</SYNC>
<SYNC Start=62000>
<P Class=ENCC>We wouldn't have to go too far, just look at the stars</P>
<P Class=FRCC>Nous n'avons pas besoin d'aller très loin, juste contempler les étoiles</P>
<P Class=DEUT>Wir müssen nicht sehr weit fahren, nur schau dir die Sterne an</P>
<P Class=JPCC>遠くに行かなくてもいい, 星を見てみよう</P>
</SYNC>
<SYNC Start=72000>
<P Class=ENCC>This night could be ours</P>
<P Class=FRCC>Cette nuit pourrait être à nous</P>
<P Class=DEUT>Diese Nacht könnte uns gehören</P>
<P Class=JPCC>今夜は私たちのものになるわね</P>
</SYNC>
<SYNC Start=79100>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>The world I know is a world too slow</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Le monde que je connais Est un monde trop lent</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Die Welt, die ich kenne, ist eine Welt, die zu langsam geht</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>この世界は 遅い世界だ</P>
</SYNC>
<SYNC Start=86000>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>If you don't move fast enough, keep your head low</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Si vous ne bougez pas assez vite, gardez la tête basse</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Wenn du dich nicht schnell genug bewegst, Halte deinen Kopf tief</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>足を速めないと、 頭を低くしなさい</P>
</SYNC>
<SYNC Start=92000>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>The world I know is a world much too slow</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Le monde que je connais est un monde beaucoup trop lent</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Die Welt, die ich kenne, ist eine Welt, die viel zu langsam geht</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>この世界は 遅すぎる世界だ</P>
</SYNC>
<SYNC Start=97800>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>If you can't move fast enough child, better stay on the low child</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Si vous ne pouvez pas bouger assez vite enfant, mieux vaut rester sur le bas chemin enfant</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Wenn du dich nicht schnell genug kind, bleib lieber auf dem Boden</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>速く走れないなら、子供よ、低くしまおう</P>
</SYNC>
<SYNC Start=104900>
<P Class=ENCC>And I want a life lover that'll go far</P>
<P Class=FRCC>Et j'aimerais une amoureuse de vie qui irait si loin</P>
<P Class=DEUT>Und ich möchte einen Lebenspartner haben, der so weit geht</P>
<P Class=JPCC>人生の恋人が そこまで行くような 必要わ</P>
</SYNC>
<SYNC Start=110000>
<P Class=ENCC>We don't have to do this right</P>
<P Class=FRCC>Nous n'avons pas besoin de faire cela maintenant</P>
<P Class=DEUT>Wir müssen das jetzt nicht tun</P>
<P Class=JPCC>正しいことをする必要はないわ</P>
</SYNC>
<SYNC Start=114000>
<P Class=ENCC>Do you know who you are?</P>
<P Class=FRCC>Savez-vous qui vous êtes?</P>
<P Class=DEUT>Kannst du wissen, wer du bist?</P>
<P Class=JPCC>あなたは誰ですか?</P>
</SYNC>
<SYNC Start=116750>
<P Class=ENCC>This ride could be ours, just look at those stars</P>
<P Class=FRCC>Cette balade pourrait être à nous, juste regardez ces étoiles</P>
<P Class=DEUT>Dieser Trip könnte uns gehören, schau dir nur diese Sterne an</P>
<P Class=JPCC>このリードは私たちのものになるわ, 星を見てみよう</P>
</SYNC>
<SYNC Start=131850>
<P Class=ENCC>And we are never going home</P>
<P Class=FRCC>Et nous ne retournerons jamais chez nous</P>
<P Class=DEUT>Und wir gehen nie nach Hause</P>
<P Class=JPCC>そして帰らないわ</P>
</SYNC>
<SYNC Start=135300>
<P Class=ENCC>This ride is far too long to travel alone</P>
<P Class=FRCC>Cette balade est trop longue pour voyager seul</P>
<P Class=DEUT>Dieser Trip ist viel zu lang für allein zu reisen</P>
<P Class=JPCC>このリードは長すぎるから一人で旅するのは難しいわ</P>
</SYNC>
<SYNC Start=142000>
<P Class=ENCC>And the moon will shine brightly on this road</P>
<P Class=FRCC>Et la lune brillerait brillamment sur cette route</P>
<P Class=DEUT>Und der Mond wird hell strahlen auf dieser Straße</P>
<P Class=JPCC>月がこの道を明るく照らすわ</P>
</SYNC>
<SYNC Start=152000>
<P Class=ENCC>Which way do you want to go?</P>
<P Class=FRCC>Dans quelle direction veux-tu aller?</P>
<P Class=DEUT>Wohin möchtest du gehen?</P>
<P Class=JPCC>どこへゆけたいの?</P>
</SYNC>
<SYNC Start=159000>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>The world I know is a world too slow</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Le monde que je connais Est un monde trop lent</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Die Welt, die ich kenne, Ist eine Welt, die zu langsam geht</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>この世界は 遅い世界だ</P>
</SYNC>
<SYNC Start=165500>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>If you don't move fast enough, keep your head low</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Si vous ne bougez pas assez vite, gardez la tête basse</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Wenn du dich nicht schnell genug bewegst, Halte deinen Kopf tief</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>足を速めないと、 頭を低くしなさい</P>
</SYNC>
<SYNC Start=171333>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>The world I know is a world much too slow</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Le monde que je connais est un monde beaucoup trop lent</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Die Welt, die ich kenne, ist eine Welt, die viel zu langsam geht</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>この世界は 遅すぎる世界だ</P>
</SYNC>
<SYNC Start=177200>
<P Class=ENCC ID=Chorus>Chorus</P>
<P Class=ENCC>If you can't move fast enough child, better stay on the low child</P>
<P Class=FRCC ID=Chorus>Refrain</P>
<P Class=FRCC>Si vous ne pouvez pas bouger assez vite enfant, mieux vaut rester sur le bas chemin enfant</P>
<P Class=DEUT ID=Chorus>Refrain</P>
<P Class=DEUT>Wenn du dich nicht schnell genug kind, bleib lieber auf dem Boden</P>
<P Class=JPCC ID=Chorus>コーラス</P>
<P Class=JPCC>速く走れないなら、子供よ、低くしまおう</P>
</SYNC>
<SYNC Start=185000>
<P Class=ENCC>And I want a life lover that'll go far</P>
<P Class=FRCC>Et j'aimerais une amoureuse de vie qui irait si loin</P>
<P Class=DEUT>Und ich möchte einen Lebenspartner haben, der so weit geht</P>
<P Class=JPCC>人生の恋人が そこまで行くような 必要わ</P>
</SYNC>
<SYNC Start=190200>
<P Class=ENCC>We don't have to do this right</P>
<P Class=FRCC>Nous n'avons pas besoin de faire cela maintenant</P>
<P Class=DEUT>Wir müssen das jetzt nicht tun</P>
<P Class=JPCC>正しいことをする必要はないわ</P>
</SYNC>
<SYNC Start=193400>
<P Class=ENCC>Yes, I know who you are</P>
<P Class=FRCC>Oui, je sais qui vous êtes</P>
<P Class=DEUT>Ja, ich weiß, wer du bist</P>
<P Class=JPCC>はい、私はあなたが誰か知っているわ</P>
</SYNC>
<SYNC Start=195750>
<P Class=ENCC>This ride could be ours, just look at those stars</P>
<P Class=FRCC>Cette balade pourrait être à nous, juste regardez ces étoiles</P>
<P Class=DEUT>Dieser Trip könnte uns gehören, schau dir nur diese Sterne an</P>
<P Class=JPCC>このリードは私たちのものになるわ 星を見てみよう</P>
</SYNC>
<SYNC Start=208200>
<P Class=ENCC>Just look at those stars</P>
<P Class=FRCC>Juste regardez ces étoiles</P>
<P Class=DEUT>Schau dir nur diese Sterne an</P>
<P Class=JPCC>星を見てみよう</P>
</SYNC>
<SYNC Start=215333>
<P Class=ENCC>Baby we could be stars</P>
<P Class=FRCC>Chérie, nous pourrions être des étoiles</P>
<P Class=DEUT>Baby, wir könnten Sterne sein</P>
<P Class=JPCC>ベイビー、我々も星になれるわ</P>
</SYNC>
</BODY>
</SAMI>