How to Add HTML Video Subtitles and Captions

To add video subtitles in HTML, upload a WebVTT caption file to the same folder of your website that the video is stored in. Add a track element referencing the appropriate WebVTT file to the video’s HTML code, and your video will now display a CC symbol among the controls.
 
HTML video subtitles make your content accessible to everyone by using a standardized captioning format that works on all desktop devices and browsers.
Here’s an example of HTML video code with a track tag for closed captions and French subtitles:
 

<video width="320" height="240">
<source type="video/mp4" src="/my_video_file.mp4" /> 
<track src="/captions_file.vtt" label="English" kind="captions" srclang="en-us" default="" /> 
<track src="/French_captions_file.vtt" label="French" kind="subtitles" srclang="fr" /></video>

What caption format does HTML require?

WebVTT captions are now the preferred format for HTML5 video due to parameters which allow for adjustments to the line position, text position, styling, and alignment.
 

How HTML Video Subtitles Work

HTML5 natively supports video without the need for third-party plugins, which is a major step forward in standardizing accessible video across the internet.

In older versions of HTML, there was no standard for rendering a video on a web page. Almost all videos were shown through plugins, which created compatibility conflicts across different browsers and devices – making it practically impossible to publish video that worked universally.
 

How to use the HTML track element?

The track element can be used to add timed-text data enhancements like subtitles, closed captions, audio description, and chapter markers to your video. Note that multiple track elements can be used simultaneously.

The attributes of the track element are:

src = specifies the URL location of the caption file
label = specifies the title of the track
kind = specifies the type of time-aligned text. Options include captions, subtitles, chapters, descriptions, or metadata.
srclang = specifies the language
default = specifies that this track is enabled by default.

More questions on HTML?

We’ve got you covered.

Watch our conversation with an expert from the World Wide Web Consortium and member of the HTML5 Accessibility Task Force.

Related resources: