Convert Subtitles for HTML5 Video

HTML5 video workflows usually need WebVTT (VTT) captions, even when the source subtitles started as SRT or ASS. Converting to VTT ensures captions work reliably across all browsers and HTML5 video players.

Quick answer

Use the HTML5 Video Subtitle Converter to create a browser-ready WebVTT file from SRT, VTT, or ASS input. The output includes the WEBVTT header and dot-based timestamps required by strict browser playback.

When to use this workflow

Use this workflow when captions will be loaded through:

An HTML5 <track> element: The native browser video element
A custom web video component: React, Vue, Angular video players
A static site video page: Embedded videos on your website
A browser-based preview or QA workflow: Testing captions before deployment
JavaScript video libraries: Video.js, Plyr, MediaElement.js, JW Player

Keep the source subtitle file if editing will continue later. VTT is for browser delivery, not for editing.

Why HTML5 video needs VTT

HTML5 video uses the <track> element to load captions, and browsers expect WebVTT format:

Browser-native support: All modern browsers (Chrome, Firefox, Safari, Edge) have built-in WebVTT parsers
W3C standard: WebVTT is the official standard for HTML5 video captions. For a format comparison, see SRT vs VTT.
Strict parsing: Browsers reject files without the WEBVTT header or with wrong timestamp format
Better debugging: If the VTT file is valid, caption issues are more likely to come from the player setup or server configuration, not the subtitle format

Step-by-step workflow

1. Start with the subtitle file you already have

Before converting, identify your source format:

SRT: Most common, exported by transcription tools and subtitle editors
ASS: Advanced styling, used in anime fansubs and Aegisub
VTT: Already web-ready, but may need validation or cleanup

2. Convert to VTT

Open the HTML5 Video Subtitle Converter
Upload or paste SRT, VTT, or ASS subtitle content
Click Convert to VTT
The tool automatically:
- Adds the WEBVTT header (if missing)
- Converts timestamp format to VTT style (dots instead of commas)
- Removes SRT cue numbers (optional in VTT)
- Strips ASS styling and override tags
- Preserves subtitle text and timing

3. Review the VTT output

Check the converted VTT file:

✅ Header: First line is WEBVTT (uppercase)
✅ Timestamps: Use dots (00:00:01.000), not commas (00:00:01,000)
✅ Text: Subtitle text is intact and readable
✅ Encoding: Non-English characters display correctly

4. Download the VTT file

Click Download VTT to save the converted file. The file is ready to use in HTML5 video players.

5. Attach to HTML5 video track and test

Add the VTT file to your HTML5 video:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="subtitles" src="captions.en.vtt" srclang="en" label="English" default />
</video>

Open the page in a browser and verify:

Captions appear at the correct times
Text is readable and properly formatted
No timing drift or sync issues
Captions work across different browsers (Chrome, Firefox, Safari, Edge)

What changes during conversion

From SRT to VTT:

✅ Header added: WEBVTT line added at the top
✅ Timestamps converted: Commas → dots (00:00:01,000 → 00:00:01.000)
✅ Cue numbers removed: Sequential numbers (1, 2, 3) are optional in VTT
✅ Text preserved: Subtitle text and timing stay the same

From ASS to VTT:

✅ Header added: WEBVTT line added at the top
✅ Timestamps converted: ASS format → VTT dot-based format
✅ Text preserved: Subtitle text stays the same
✅ Line breaks preserved: ASS \N → actual line breaks
❌ Styling removed: Colors, fonts, borders, shadows are stripped
❌ Positioning lost: All subtitles appear in the default position
❌ Override tags removed: {\an8}, {\c&HFF0000&}, {\pos(x,y)}, etc. are deleted

From VTT to VTT (cleanup):

✅ Validation: Checks for malformed timestamps, missing header, broken cue structure
✅ Normalization: Fixes common formatting issues
✅ Encoding: Ensures UTF-8 encoding

Common mistakes

Renaming SRT to VTT without converting

Changing the extension does not convert the subtitle format. Browsers can reject a renamed file if the header and timestamps are still SRT-style.

Fix: Use the HTML5 Video Subtitle Converter to properly convert the file.

Debugging player code before checking the file

Check the VTT file first. If the file has no header, comma timestamps, or malformed cue blocks, the player configuration is not the first problem.

Fix: Validate the VTT file with the WebVTT Validator before debugging the player. See how to validate WebVTT files for a detailed walkthrough.

Forgetting the hosting layer

The VTT file must be reachable from the page. After conversion, open the caption URL directly and test it in the final browser environment.

Fix: Upload the VTT file to your web server or CDN, and verify the URL is accessible from the browser.

Using the wrong MIME type

If the server sends Content-Type: text/plain or application/octet-stream, the browser refuses to parse the file as WebVTT.

Fix: Configure the server to send Content-Type: text/vtt for .vtt files. See How to fix VTT MIME type for HTML5 video for server-specific instructions.

Forgetting CORS headers for cross-origin VTT files

If your video page is at example.com and the VTT file is at cdn.example.com, the browser blocks the request unless the server sends Access-Control-Allow-Origin headers.

Fix: Configure CORS on the CDN or origin server, and add crossorigin="anonymous" to the <video> element.

Not testing in multiple browsers

A VTT file that works in Chrome may fail in Firefox or Safari due to stricter parsing or CORS enforcement.

Fix: Test the VTT file in all target browsers (Chrome, Firefox, Safari, Edge) before deploying to production.

Troubleshooting scenarios

Scenario 1: Captions don’t appear in HTML5 video

Possible causes:

VTT file is malformed (missing WEBVTT header, wrong timestamp format)
Server sends wrong MIME type (text/plain instead of text/vtt)
CORS headers missing (cross-origin request blocked)
Track element has wrong src URL (404 error)

Fix:

Validate the VTT file with the WebVTT Validator
Check the browser console for errors (F12 → Console tab)
Check the Network tab for the VTT request - verify it returns 200 OK and Content-Type: text/vtt
If cross-origin, verify CORS headers and crossorigin="anonymous" attribute

For MIME type issues, see how to fix VTT MIME type for HTML5 video. For a broader troubleshooting walkthrough, see Why subtitles do not show in HTML5 video.

Scenario 2: Captions appear but text is garbled

Cause: Wrong text encoding (e.g., Windows-1252 instead of UTF-8).

Fix: Re-save the source file as UTF-8 before converting, or use the Subtitle Encoding Fixer after conversion.

Scenario 3: Captions work in Chrome but not Firefox or Safari

Cause: Firefox and Safari are stricter about MIME types and CORS than Chrome.

Fix:

Confirm Content-Type: text/vtt (not text/plain)
If cross-origin, ensure Access-Control-Allow-Origin is set
Check the browser console for specific error messages

Scenario 4: Timestamps are off by a few seconds

Cause: Rounding errors during conversion, or the original file had precision issues.

Fix: Use the Subtitle Time Shifter to adjust timing after conversion.

Scenario 5: Some cues are missing from the VTT output

Cause: The source file has malformed cues (missing timestamps, wrong format) that the converter skipped.

Fix: Validate the source file before converting. Fix any errors, then re-convert.

Frequently asked questions

What subtitle formats does HTML5 video support?

HTML5 <track> elements only support WebVTT natively. SRT and ASS must be converted to VTT before use.

Can I use SRT directly in HTML5 video?

No. Browsers expect WebVTT format. SRT files must be converted to VTT first.

What’s the difference between SRT and VTT?

Difference	SRT	VTT
Header	None	`WEBVTT` required
Timestamps	`00:00:01,000` (comma)	`00:00:01.000` (dot)
Browser support	❌ Not native	✅ Native
Cue numbers	Required	Optional

Will the conversion preserve formatting tags?

Yes. Basic HTML-like tags (<i>, <b>, <u>) are preserved during conversion. Advanced ASS styling is removed.

Can I convert multiple subtitle files at once?

The HTML5 Video Subtitle Converter processes one file at a time. For batch conversion, convert each file individually.

How do I add multiple subtitle languages?

Add multiple <track> elements with different srclang and label attributes:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="subtitles" src="captions.en.vtt" srclang="en" label="English" default />
  <track kind="subtitles" src="captions.es.vtt" srclang="es" label="Español" />
  <track kind="subtitles" src="captions.fr.vtt" srclang="fr" label="Français" />
</video>

Can I style VTT captions?

Yes. Use CSS with the ::cue pseudo-element:

::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2em;
}

What’s the best way to serve VTT files?

MIME type: Configure your server to send Content-Type: text/vtt
CORS: If cross-origin, send Access-Control-Allow-Origin headers
Encoding: Always use UTF-8 encoding