Generate an HTML Track Element
Or paste subtitle text
Options
Subtitles are for viewers who can hear the audio and need the words — a translation, or the same language written out. Captions are for viewers who cannot hear it, so they also carry what sound tells everyone else: music, a door, a phone ringing. The same file can serve either purpose, which is why the page asks instead of guessing, and the value cannot be changed later from inside the element. Descriptions, chapters and metadata are not offered: none of them can be filled with the contents of a subtitle file.
A short language tag such as en, en-GB or pt-BR, naming the language of the words in the subtitles, not the language of the video. A track that calls itself subtitles is required to name a language, so clearing this box falls back to en rather than dropping the attribute — and because every attribute is printed in the output, you can see the fallback before you paste anything.
Free text: English, English (SDH), Français. It is the line a viewer picks from when a page offers more than one track, so write it as your audience would recognise it. Clearing the box removes the attribute altogether rather than writing an empty one, which hands the naming back to the player; an empty label would put a nameless row in that menu.
On, the subtitles come up as soon as the video plays. A media element may only have one default track, so leave it off when the page already carries one: a second track claiming to be the default makes players pick the wrong one, while not being the default only means the viewer switches it on themselves.
Which frame rate the timings are counted in. On the format pages this is what MicroDVD needs, because it stores timing as frame numbers. On the frame rate pages it is the rate the file was timed against — the version the subtitles were made for — and the page's second box takes the rate of the video you are going to use them with. 23.976, 24, 25, 29.97, 30, 50, 59.94 and 60 are the common ones. Getting it wrong shifts the whole timeline, and on the frame rate pages it shifts it by a ratio rather than by a fixed amount.
This page puts your subtitles inside a single HTML element you can paste into a page. What comes out is one `<track>` line with the WebVTT inlined in its `src` attribute, so the subtitle text travels with the markup itself — there is no second file to upload, no path to get right, and no way for a player to end up looking for something that is not there.
That inlining is the whole point of the page, and the reason is the way browsers treat local files. A track is fetched rather than drawn, and a browser refuses that fetch when the page itself was opened from a disk, so a `<track src="film.vtt">` on a page you saved to your desktop shows nothing at all: no error on screen, an empty subtitle menu, and one line in a console that most people never open. A `data:` URI is never fetched — the text is sitting in the attribute — so it works there. The cost is size, since every space and line break of the WebVTT becomes three characters, and that cost is worth paying here: the element exists so that it works on its own.
The attributes come from the boxes on the panel, because none of them can be read out of your file. `kind` matters most: subtitles is a translation for viewers who cannot follow the audio, and captions is the fuller version that also carries music and sound effects for viewers who cannot hear it. A file full of `[door slams]` and musical notes could be either, and only you know which audience it was made for — so the page asks instead of guessing. The other three are the language the text is in, the name shown in the player's subtitle menu, and whether the track should open by itself.
Two of those boxes behave differently when you empty them, and the difference is worth knowing. Clearing the menu name removes the attribute altogether, because a label is optional and leaving it out simply hands the choice to the player. Clearing the language box does not: a track that declares itself as subtitles must name a language, so an empty box falls back to `en` rather than producing an element that is missing something it is required to have. Neither is a silent substitution — the output prints every attribute, so you can see what your boxes produced.
The subtitle text inside the element is written by the same WebVTT writer the conversion pages use, which means a file that arrived as WebVTT keeps everything it carried outside its cues: the text on the `WEBVTT` line, comment and style blocks, and the per-cue settings that decide where a line sits on the screen. Nothing about your file is changed, and nothing is uploaded; the words, the times and the styling all leave in the state they arrived in.
Examples
An SRT file, with the default boxes
Input
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Output
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
One line out, and the entire file is inside it: %0A is a line break and %20 is a space, so the WebVTT rides along in the src attribute instead of sitting in a file beside the page. The four attributes are the four boxes — the language the text is in, the row a viewer picks in the player's subtitle menu, and default, which is what makes this track open on its own. The cue numbers from the SRT are kept as cue identifiers.
A WebVTT file goes in as the same WebVTT
Input
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Output
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Everything a WebVTT file holds outside its cues survives: the remark on the WEBVTT line, the NOTE block, the STYLE block that decides how the subtitles look in the player, the cue's name line, and the per-cue setting align:start position:10% (the %25 in there is a percent sign, encoded because a bare percent sign is not allowed inside a URI). A file that came in as WebVTT goes out as that same WebVTT. The two boxes say en-GB and English (UK), because this copy was made for a British audience — nothing in the file said so.
Subtitles for viewers who cannot hear
Input
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Output
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
The file is full of sound effects and music, which is exactly what kind="captions" — subtitles for viewers who cannot hear — is for, and the box is the only place that can be said. Separately, the menu name was typed as Tom & "the boss" and comes out as Tom & "the boss": an unescaped quote would have closed the attribute right there and turned the rest of the name into garbled attributes on the element.
Three boxes cleared or switched off
Input
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Output
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Three boxes changed, three different results, because HTML asks for different things. The menu name is gone from the element entirely — it is optional, and leaving it out hands the decision to the player. The language box is empty and still produces srclang="en": a track declaring itself as subtitles must name a language, so there is no such thing as an empty one, and the fallback is visible in the output. The default switch is off and that attribute is gone too, so this track will not open by itself, which is the safe direction when a page carries more than one.
Frequently asked questions
Do I still need a .vtt file next to my page?
No, and that is the point of the page. The WebVTT is written into the src attribute as a data: URI, so the element carries its own subtitles. You can paste it into a page, email the file, or move it to another folder and the subtitles still appear. The one thing to watch is that the whole thing is one attribute: if you copy only part of that long line, you have broken the URI and the track will be empty.
Will this work if I just open the HTML file from my own computer?
Yes, and that case is the reason the page inlines the subtitles. When a page is opened from a disk, a browser refuses to fetch a separate track file, so a track pointing at film.vtt would show nothing — no visible error, just an empty subtitle menu. A data: URI is not fetched at all, the text is already in the attribute, so it works the same way on your desktop as it does on a server.
Why is the output so much longer than my subtitle file?
Because every character that is not a letter or a digit becomes three in a URI — a space is %20 and a line break is %0A. A file of a hundred kilobytes becomes a few hundred. Base64 would be shorter, at around a third over the original rather than double, but the result would be a wall of unreadable characters; as it stands you can look at the src attribute and recognise your own dialogue inside it, which is worth the extra size for a file you are about to paste into a page and maintain by hand.
Why is there no label attribute after I cleared the box?
Because a menu name is optional in HTML, and leaving it out does not mean "no name" — it means the player decides what to show in its subtitle menu, which is usually the language. Clearing the box therefore removes the attribute rather than writing an empty one, since label="" would show as a blank row in that menu. Put a name back at any time; it is a plain string and nothing else on the page depends on it.
What is the difference between subtitles and captions here?
Who they are for. Subtitles assume the viewer can hear the audio and needs the words translated or spelled out; captions assume the viewer cannot hear it, so they also carry the information that reaches a hearing audience through sound — music, doors, a phone ringing. A file can serve either purpose, and the same text is in both, so the page cannot tell which one you mean. It also cannot be changed later inside the element, so pick the one your audience needs.
Which of the other track kinds did you leave out?
Three: descriptions, which narrate the picture for viewers who cannot see it; chapters, which is navigation rather than subtitles and has a page of its own on this site; and metadata, which is not shown to anyone. None of the three can be filled with the contents of a subtitle file, so offering them would only let you build an element that displays nothing. The two that are offered are the two a subtitle file can actually serve.
Is anything in my subtitles changed on the way in?
The text, the timings and the styling are unchanged, and a WebVTT file keeps its own comment, style and region blocks plus its per-cue settings. What does change is the shape: the lines are rewritten in WebVTT syntax, which is what players read, so an SRT file's comma in 00:00:01,000 becomes a full stop. One byte is dropped deliberately — a leading marker that says the file is UTF-8, because the data URI states the encoding itself and the marker would otherwise appear as three stray characters at the front.