Add VTT subtitles to an HTML video
Connect an existing caption file to a web video, then check the captions in the player that visitors will use.
Use a WebVTT file in a track element inside your video element. If your subtitles are SRT, convert a copy to VTT first. The caption file stays separate from the video; this does not burn text into the picture.
Prepare a caption file for the final cut
Start with subtitles whose timeline matches the exact video you will publish. Changing SRT to VTT changes the file structure, not the timing or the words. A caption from a full recording may not fit a short clip cut from it.
Use the SRT ↔ VTT converter to make a basic WebVTT copy. Read any formatting-loss warning before downloading. Keep the original if it includes positions, styles or other information that your final player needs.
Connect the file with a track element
Put the following HTML page, demo.mp4 and example.vtt in the same directory on a web server. The sample video is a synthetic, silent 12-second background. Its three captions demonstrate the file connection; they are not a transcript of speech.
Use your real video's filename and the actual language of its captions when adapting the example. The label is the name people see in the player's track menu.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Caption example</title>
<video controls width="640">
<source src="demo.mp4" type="video/mp4">
<track kind="captions" src="example.vtt"
srclang="en" label="English" default>
</video>
</html>Inspect a cue before testing the player
In this synthetic example, the first caption begins at 2 seconds and ends at 4.5 seconds. The empty line after WEBVTT separates the header from the first cue. The converter writes a period before milliseconds in VTT.
WEBVTT
00:00:02.000 --> 00:00:04.500
Keep the original subtitle file.
00:00:05.000 --> 00:00:07.250
Check timing in your final player.If the captions do not appear
| What you see | Check next |
|---|---|
| No caption track | Check the track path, successful file response and text/vtt content type. |
| A track exists but no text appears | Enable it in the player's caption menu and play through a cue's time range. |
| The file works on a server but not from a local folder | Test through HTTP. File URL security rules can differ from a hosted page. |
| Captions are hosted on another origin | Check the video's crossorigin setting and the caption server's CORS response. A same-origin test is easier to isolate. |
| Words appear at the wrong moment | Compare the beginning and end of the final cut; format conversion does not synchronize the file. |
Review the published experience
Open the actual published video on desktop and phone. Confirm that the caption menu names the right language, text is readable, and the first and last cues match the recording. Keep a separate text transcript if readers also need a searchable version.
For captions intended to replace listening, review relevant sound information and speaker identification as well as the words. A technically valid VTT file alone does not establish caption quality or accessibility compliance.
Common questions
Can I put an SRT file directly in this track element?
Use WebVTT for the native HTML track workflow shown here. A third-party player may accept other formats, but this example does not depend on one.
Does the default attribute force captions on for every visitor?
No. It requests the default track; the browser and the viewer's preferences still affect track selection. Test the caption controls in your target browser.
Will this create subtitles from the video?
No. It connects an existing caption file. Transcribe the recording and review its text and timing first if no subtitle file exists.
