How to Add Closed Captions & Subtitles to HTML5 Videos
Adding closed captions to your videos in HTML5 isn't hard. Let's break it down into 3 simple steps:
1. Get a WebVTT Caption File for Your Video
Videos display closed captions by referring to an accompanying caption file, which contains text of speech and sounds with corresponding timestamps.
Caption files come in many different formats.
WebVTT (.vtt) is the format of choice for HTML5 video.
The WebVTT caption format is a text file with a .vtt extension. The file begins with a header “WEBVTT FILE” followed by cues and their corresponding text.
A WebVTT file looks something like this:
1 00:00:10.500 --> 00:00:13.000 NARRATOR: In a world where nothing is what it seems, 2 00:00:15.000 --> 00:00:18.000 one man is about to do the impossible.
Pro tip: While you can create a WebVTT caption file yourself, or convert an existing caption file, the easiest way is to submit your video for transcription and captioning to a professional captioning company.
2. Upload Caption File to the Same Folder as Your Video
When your website plays a video, it references a specific video file that is stored on your website’s server. Save a copy of your WebVTT caption file in the same folder where your video is stored.
3. Add a Track Element to Your Video's HTML Code
Open up your website’s HTML editor and view the code for the video that needs captions.
track tag with the following information:
- src – the URL location of the caption file on your server
- label – the title of the track as it displays for the viewer
- kind – the type of time-aligned text. The options are captions, subtitles, chapters, descriptions, or metadata.
- srclang – the language
- default – makes this track enabled by default. Note that multiple track elements can be used simultaneously.
Here’s an example of a video with
track tags. The first tag is for closed captions, which are the default. The second tag is for 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>
4. Save Your Changes and Update Your Webpage
Be sure to save changes and update your webpage before walking away.
The video should now display a CC symbol in the controls. You can click on this to display the text track options and toggle captions or subtitles on and off.