How to Add Closed Captions & Subtitles to HTML5 Videos

 

HTML5 video captioning makes accessibility a whole lot easier. 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.

HTML 5 Logo

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.

Add a 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>
CC button highlighted on the bottom of a video player

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.

How HTML5 Improves Video Accessibility on the Web

Most browsers have adopted the basic video features offered by HTML5, as have popular cloud-based media players like Video.js and JW Player. Some browsers offer better video accessibility than others.

Best of all, HTML5 video offers a standardized caption format that works on all desktop devices and browsers.

Why Was Video Captioning in HTML so Difficult?

In older versions of HTML, there was no standard for rendering a video on a web page. Almost all videos were shown through plugins, like QuickTime, Silverlight, or RealPlayer.

Without standardization, you ran into compatibility conflicts across different browsers and devices. And although web publishers try to build redundancies and fallback provisions to maximize compatibility, it was practically impossible to publish video that worked universally.

As a consequence, publishing closed captions was difficult and unreliable because both caption format and encoding method depend on the video publishing technology used.

How HTML5 Video Captioning Works

HTML5 is a major step forward for standardizing video across web browsers and devices and thus simplifying closed captioning. The idea is that web video will be based on an open, universal standard that works everywhere.

HTML5 natively supports video without the need for third-party plugins. A video can be added to a web page using the video element, which makes it almost as simple as adding an image.

The track element can be used to display closed captions, subtitles, audio descriptions, chapter markers, or other timed-text data.

The HTML code below shows how these elements work:

The attributes of the track element work like this:

src – specifies the URL location of the caption file
label – specifies the title of the track
kind – specifies the type of time-aligned text. The options are captions, subtitles, chapters, descriptions, or metadata.
srclang – specifies the language
default – specifies that this track is enabled by default. Note that multiple track elements can be used simultaneously.

What is the Standard Caption Format for HTML5 Video?

how to create a webvtt file

For several years, two caption formats competed for dominance in HTML5 video. In part, this is because there are two groups collaborating on HTML5: The Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C).

WHATWG developed and proposed the WebVTT (Web Video Text Tracks) caption format, which is a new, user-friendly text format that consists of line numbers, timelines, and text with formatting options. WebVTT is similar to the widely established SRT format, but accommodates text formatting, positioning, and rendering options (pop-up, roll-on, paint-on).

W3C proposed using TTML (timed text markup language), which is a widely established XML format supported in Adobe Flash, and Microsoft Silverlight.

Eventually, W3C decided to support WebVTT. WebVTT is now the accepted standard format for HTML5 video.

WebVTT Caption Format

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.

There are several parameters that allow you to control the line position, text position, and alignment. You can also add styling to the text within the cue itself. The example below demonstrates a bold <b> element.

WEBVTT

1
00:00:13.000 --> 00:00:016.100
ARNE DUNCAN: I'll start and
then turn it over to you.

2
00:00:16.100 --> 00:00:20.100
It's so critically important
that parents be actively engaged