Lesson 2: Adding captions to video

Overview

In the previous lesson you learned to add video to a web page. Earlier in this course, you also learned about the importance of accessibility, designing and developing web pages that are accessible to everyone, including individuals with disabilities. There are several groups of people who can be shut out if video is not accessible:

• People who are unable to hear the audio need closed captions, a separate track that provides a text version of the audio content.
• People who don't understand the language spoken in the video need subtitles, a separate text track that translates the video's spoken content into another language.
• People who can't see the video need audio description, a separate track that provides a brief description of any key visual content that users wouldn't understand just by listening to the audio. For example, if a news video includes an interview with someone whose name and title appears visually on the screen but is never mentioned audibly, the person's name and affiliation would need to be provided as audio description. Audio description can be provided as a separate audio track, in which a narrator injects brief descriptions, or it can be provided as a text track similar to closed captions and subtitles, readable by assistive technologies such as screen readers and Braille output devices.

HTML5, in addition to introducing the new <video> tag, also introduced a new <track> tag, which is designed to provide a separate text track that is synchronized with the video. The <track> tag is designed to meet each of the needs described above, but can also be used for other purposes such as synchronizing pop-up comments with video, or providing lyrics that accompany music videos, karaoke-style.

The <track> element points to a separate file in a format called Web Video Timed Text (WebVTT). A WebVTT file is a plain text file that consists of the text that needs to be displayed, divided up into small segments. Each segment is preceded by the start time and end time for displaying that text. Here's an example of closed captions from an early SpongeBob Squarepants episode, featuring a conversation between Squidward and Plankton:

00:05:35.000 --> 00:05:39.000
People talk loud when they want to sound smart, right?

00:05:40.000 --> 00:05:43.000
CORRECT!

Activities

In this lesson you will add a single caption track to your video.

1. Open the file video.html and return to the source code for the video element that you added to the page in the previous lesson.
2. Use the following instructions to add a <track> element to your video.
3. Take a moment to open the WebVTT caption file in any text editor to see what it looks like.
4. When finished, save your work, and check your web page in multiple browsers and discuss this experience with your class. Do the captions appear? Are they easy to read? Is there a button on the player that allows them to be turned on or off? Which browser do you feel offers the best user experience for people who need captions?

Instructions for Adding Captions

1. Inside the opening and closing video tags, add one <track> element, which should include an opening and closing tag (<track> and </track>). It doesn't matter whether it goes before or after the two source elements that you added in the previous lesson.
2. Add the following attributes to the opening <track> tag:

   src="path_to_your_caption_file"

   This attribute tells the browser where to find the WebVTT caption file.

   kind="captions"

   This attribute tells the browser what kind of track this is. In this lesson, it's a caption file. Other options include "subtitles", "descriptions", "chapters", and "metadata".

   srclang="en"

   This attribute tells the browser what language the track is in. Each language is represented by two characters, such as "en" for English, "fr" for French, or "es" for Español. W3Schools.com includes a complete list of language codes.

   default

   This is a one-word attribute, with no value. It tells the browser whether captions should be enabled by default. Unfortunately some browsers are buggy in the way they implement this, and this attribute is required or the captions aren't displayed at all and there's no way to turn them on. So be sure to include this attribute.

All done?

Proceed to the next module.