How to Add Closed Captions to Video and Audio in Lectora and Lectora Online

Web accessibility is an important part of the development process that should be considered with your initial course design. It is a “best practice” for your e-Learning presentations to be compliant with Section 508 of the Rehabilitation Act. As described in the 508 Standards Guide [1194.22(b)]:

“Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.”

Lectora® and Lectora® Online make it easier to comply with Section 508 requirements as well as conform to Level AA of the Web Content Accessibility Guidelines 2.0 by including closed captions within your titles.

This article will show you step by step how to create and add closed captions to Lectora and Lectora Online titles. For more information, visit the Lectora and Lectora Online Help for topics on Working with closed-captioning audio objects and Working with closed-captioning video objects.

Help

Part I: How to Add Closed Captions to Video Files

Step A: Insert Your Video File into Lectora and Lectora Online

Open your title in Lectora or Lectora Online. Locate and drag the desired video file into your title, or alternatively, from the Insert ribbon, select Video File. Browse for and select the desired video file.

Video File

Lectora and Lectora Online support adding captions to MP4 video formats. If your file is not in this format (for example, WMV or AVI), you will need to convert it to MP4. You can convert it as you import it. Double-click on the video on the page (or in the Title Explorer) to switch to the Properties ribbon for the video object. Click Convert to MP4.

Step B: Create Your Caption File

Adding captions requires a specially formatted caption file in order to attach captions. You can select from three supported formats for the captioning file:

  • Web Video Text Tracks (WebVTT) – Captioning format for HTML media players (Recommended)
    Note: For full Firefox support with WebVTT, on the Web server where the title resides, set a mime type definition for VTT to AddType text/vtt .vtt
  • SubRip Subtitle (SRT) – Popular standard used for YouTube and Facebook captioning
  • eXtensible Markup Language (XML) – Captioning format for Flash video

Additionally, you can customize the caption styling, including the font and font highlighting. The following font properties can be configured within the closed-captioning file:

Font property Description Example
color A general color name or a specific hexadecimal color value. Red or #FFCC00
font-family An installed font. Arial
font-size Size of the font in pixels. The default font size is 14. 12
font-style Style of the font. The default is normal. italic
font-weight Weight of the font. The default is normal. bold
text-align Alignment of the caption text as either left, right, or center. The default is center. Center
text-decoration Enhanced font highlighting. The default is none. underline

Follow these rules when creating the captioning file:

  • Specify the start and end times for each caption set. Time is in the format: hours:minutes:seconds:hundredths (HH:MM:SS:hhh)
  • Specify the text for each caption set. Text can appear on multiple lines, if desired.
  • Optionally, customize the font styling using a <span> tag.
  • Save the file as a plain text file with the desired name and change the file extension to the appropriate captioning file format (.vtt, .srt, or .xml).
    Note: For WebVTT, make sure there is a blank line between the heading and the caption details.

There are a couple of different ways to create your caption file. You can easily create it yourself, or use a 3rd party service (such as 3PlayMedia). To create a caption file, click Add Captions on the Properties ribbon for the video.

On the Add Captions dialog, click one of the Sample caption buttons to see a sample captioning file:

 

Examples

  • WebVTT (Recommended)
    00:00:00.000 --> 00:00:00.000
    <span style="text-align:center"></span>
    00:00:08.000 --> 00:00:10.000
    VTT Format: This line should appear at 8 seconds
    00:00:10.500 --> 00:00:12.500
    These two lines should
    appear at 10.5 seconds
    00:00:17.000 --> 00:00:20.000
    These two lines should appear
    with styling at <span style="color: #FF0000;font-weight: bold;">17 seconds</span>!
  • SRT
    00:00:00.000 --> 00:00:00.000
    <span style="text-align:center"></span>
    1 
    00:00:08.000 --> 00:00:10.000 
    SRT Format: This line should appear at 8 seconds
    2 
    00:00:10.500 --> 00:00:12.500 
    These two lines should 
    appear at 10.5 seconds 
    3 
    00:00:17.000 --> 00:00:20.000 
    These two lines should appear 
    with styling at <span style="color: #FF0000;font-weight: bold;">17 seconds</span>!
    
  • XML
    <?xml version="1.0" encoding="UTF-8"?>
    <tt xmlns="http://www.w3.org/2006/10/ttaf1">
      <div>
        <p begin="00:00:00" end="00:00:00">
        <span style="text-align:center"></span>
        <p begin="00:00:08" end="00:00:10">
          XML Format: This line should appear at 8 seconds
        </p>
        <p begin="00:00:10.5" end="00:00:12.5">
          These two lines should
          appear at 10.5 seconds
        </p>
        <p begin="00:00:17" end="00:00:20">
          These two lines should appear
          with styling at <span style="color: #FF0000;font-weight: bold;">17 seconds</span>!
        </p>
      </div>
    </tt>

The sample files have all of the required formatting contained within it. You simply need to change the text of the captions, and set the timings of when your text will appear and disappear. The samples each contain three parts: Header information, Text Styling information and the Body (caption text). Let’s examine the XML sample and take a closer look at each part:

  1. Header information: This section provides some general information to Lectora and Lectora Online about the file. There is nothing you need to change here.

2.   Text Styling: This sample is set up to allow for two different styles for text: “normal” and “warning”.

“Normal” is set to a font size of 15 pt, and the default closed caption color of white, while “Warning” text will display in red, bold, and 20 pt. You can leave these as is, or change them as you wish. (Note: colors are set using HEX values. Here is a handy color chart.)

As you will see below, for each line of text in your caption you can determine whether to use the “normal” style or use the “warning” style. (Or define your own style by copying the “warning” line and renaming the style id.)

3.  Body (caption text): This is where you enter the specific text and timing for your video file.

3a. Each paragraph of text that you want to appear starts with the tag of <p begin= and ends with </p>. You simply copy/paste to repeat this information as many times as needed for all of the text in your file.

3b. For each paragraph, start by setting the timing of when you want this text to appear (begin=) and disappear (end=). The format is HH:MM:SS – Hours:Minutes:Seconds. You can also indicate tenths and hundredths of seconds, if needed.

3c. Next, identify which of your defined text styles each paragraph should use. Simply change the style= value to the desired style id.

3d. Finally, add any special formatting such as line breaks <br/> (to force multiple lines in this caption) or perhaps apply a text style to span a specific word or phrase within a caption.

3d

In the sample above, you can see there will be a line break after the word “line”, and the number “17” will appear in the “warning” (red, bold) text style:

Step C: Save Your Caption File and Add It to Your Video

When you have finished making all of your edits to create your caption file from the sample, remember to save it! Using Lectora Desktop, select File > Save As and name the file appropriately. Change the file extension to XML. Using Lectora Online, click Save To Title.

Next, select the caption file. On the Video Properties ribbon select Add Captions. Browse for and select the caption file that you created.

Step D: Preview & Publish Your Video with Captions

Enter Run or Preview mode. Play your video and make sure that the closed captions appear.

Part II: How to Add Closed Captions to Audio Files

Lectora and Lectora Online support adding closed captions to MP3 audio files using the same steps as for video above: insert the audio file, and then on the Properties ribbon for the audio object select Add Captions.

Again, you may need to use Convert to MP3 to change your audio file format (for example, from WAV or WMA).

 

Step B: Preview & Publish Your Recording with Captions

Resize your audio object on the page to ensure it is tall enough to view the closed captions.

Enter Run or Preview mode. Play your recording and make sure that the closed captions appear.

 

Preview image

Tags: ,

Comments

  1. Profile photo of Windy Schneider
    Windy Schneider

    Is there a way to add multiple languages? For example, would it be possible to add buttons to show the cc in english or spanish? Where do you edit the code to do this ?

Your email address will not be published. Required fields are marked *