Adding Closed Captions to Flash Videos

Last updated: 21 October 2009
Published in: Managing your digital resources
Tags: accessibility | delivery | video

Comments (0)

Summary

Providing a textual representation of the audio content of a video program can be time consuming, but for some users it can prove to be invaluable. Not only does captioning help meet W3C requirement by facilitating access for people who have hearing impairments, it also helps: users who have no audio playback hardware; mobile users who are sited in a quiet area (such as a library) and those without proper audio codecs installed on their machines. This short paper takes a practical look at how to add subtitles to a Flash video file for online delivery. This is only one method of many but is perhaps the most straightforward and quickest for beginners.

What are closed captions?

The World Wide Web Consortium (W3C) is the international standards organisation for the World Wide Web. The consortium has developed a set of guidelines known as the Web Content Accessibility Guidelines, captioning for ‘synchronized media material’ which includes video, is covered by these guidelines.

The W3C suggest “Captions are similar to dialogue-only subtitles except captions convey not only the content of spoken dialogue, but also equivalents for non-dialogue audio information needed to understand the program content, including sound effects, music, laughter, speaker identification and location.”

So subtitles provide text for only the video’s dialogue while captions also include important sounds. ‘Closed captions’ can be turned on or off while ‘open captions’ are displayed as part of the video itself and cannot be turned off.

Adding Closed Captions

We will be using Adobe CS4 in order to create a video in Flash format which contains closed captions. The resulting video can be used in many different online contexts, from VLEs and personal networking sites to Content Management Systems and institutional websites. File locations are very important when creating any Flash files file as typically it contains more elements than just the ‘.flv’ video data. We recommend having access to your server space before beginning as moving files around later can be problematic.

Anatomy of a .swf (Shockwave Flash) file

Figure 1.0 shows the elements which when combined, form the completed Flash video, complete with captioning. These are:

1. ‘captions-seaside01.xml’: This is the timed text caption file, expressed in XML
2. ‘seaside-interview01.flv ‘: This is the digital video content
3. ‘SkinUnderPlayCaption.swf’: These are the playback controls for the video which will be displayed underneath the image
4. ‘seaside-with-captions01.swf’: This file draws the other three elements together into one .swf file. Please note though that the other three files are still required for this one to function. All of them should be uploaded to your server in order for the movie to work correctly, though only this file should be placed within your webpage.

It is important to ensure each of the required files ends up in the same loaction on your server; in order to keep them together create a folder named ‘Caption-Project’. You could create this folder locally (e.g. on your desktop) but this may lead to problems later on when you want to make files available online. If you can, create the ‘Caption-Project’ folder directly on your server.

Figure 1.0: elements which form the completed Flash video with captions and playback control

Step 1: Encode video to correct format

If your video isn’t already in the .flv or .f4v format you should use the Adobe Media Encoder application to transcode it. Consider the size of the video frame carefully and once you have made your decision output the video as a .flv file (Figure 1.1). Once this .flv file is complete we recommend you upload it directly to your website, CMS, VLE or another online loaction; this ‘parks’ the footage in a specified location and provides you with an address which won’t change. Note this address of this video content carefully as you’ll need it in Step 3 (for instance, the address for our sample .flv file is ‘http://www.jiscdigitalmedia.ac.uk/videos/subtitles/rlinter.flv’). Again, you could save the video to a local address but this may lead to broken links later on.

Figure 1.1 Shows Media Encoder with export set to FLV ‘Web Small’ fomat. Please click the image for a larger version

Step 2: Create Timed Text XML file

The second step in creating the captions is laborious, but unavoidable without resorting to extra software. Working this way has the advantage of giving us a standardised XML file which could later be repurposed, for instance for creating a captioned DVD-video disc.

Download our sample ‘timed text’ XML file (by right clicking this link and choosing ‘save’) and save it to your ‘Caption-Project’ folder. Take a quick look through this XML file by opening it in a simple text editor. You’ll notice that a beginning time and duration is given for each caption. Now begin to playback your video file with a media player of your choosing but make sure the time readout is clearly visible. By carefully going through the video (with frequent pauses!) transcribe the speech and create descriptions of any important sounds. You’ll also need to note the start time and the duration you wish the text to appear on-screen for. Add all this information to your XML file using a simple text editing application. Figure 1.2 shows a video during transcription.

Figure 1.2 video being transcribed

When this process is completed you will have an XML timed text file ready to be coupled to your .flv video. Note that the XML code for basic text formatting is included in our sample Timed Text file, but this can be altered to display larger text, coloured text, text without a solid back panel, italics or emboldened text. Sve your .xml file to your ‘Caption-Project’ folder.

Figure 1.3 shows an example of closed captions within a timed text XML file

Step 3: Adding captions to Flash video

Flash CS4 (Flash 10) has an incredibly useful feature which makes adding text to video quite straightforward. Open Flash and select ‘Create New’ Flash File (ActionScript3.0) (Figure 1.4).

Figure 1.4 creating a new Flash file. Please click the image for a larger version

Now go to ‘File’ then ‘Import’ and finally ‘Import Video’ (Figure 1.5).

Figure 1.5 importing video. Please click the image for a larger version

A dialogue will open up which allows you to locate your pre-prepared .flv video file (Figure 1.6), enter the URL of your video resource (.flv) file, which you noted in Step 1.

Figure 1.6 locating video which is already deployed. Please click the image for a larger version

You’ll now be prompted to select a player-control bar for your video, choose SkinUnderPlayCaption.swf (Figure 1.7).

Figure 1.7 selecting a player skin. Please click the image for a larger version

Select ‘finish’ and the video will be imported onto the Flash ‘stage’ area.

You’ll need to open the ‘Components’ window if it’s not already open, do this by selecting ‘Window’ from the top menu then selecting ‘Components’. Drag the FLVPlaybackCaptioning component onto the stage area (don’t worry where it’s placed as it won’t be visible in the final output). This component simply adds functionality to the video file. Figure 1.8 Shows the component window and the FLVPlaybackCaptioning component.

Figure 1.8 the component window

With the FLVPlaybackCaptioning component selected, use the Component Inspector look down the list and locate the ‘source’ box (Figure 1.8). Type in the name of your timed text xml file (this will be ‘timed-tiles01.xml’ unless you’ve renamed it, as long as everthing is in the same folder only the name of the .xml file is required, there is no need to enter the full address).

You’re now ready to publish your Flash project but before you do save your Flash project (.fla) to your ‘Caption-Project’ folder, name it caption-project01. Although this .fla project file isn’t one of the three files required for your captioned video to work, it is really useful. It allows changes to be made quickly and easily and new output to be created. For instance you may later decide to change the colour or design of the playback controls or perhaps set a video to automatically loop. You’ll need this .fla project file if you are to avoid beginning the whole process again.

After saving your project, publish by selecting ‘file’ and then ‘publish’ from the top menu bar. By default, Flash will create the required files within the folder you’ve saved your .fla project to. In this case it will be the ‘Caption-Project’ folder.

Assessing the output

Take a look at what you’ve created. Double clicking on the ‘caption-project01.swf’ file will show you the finished video (if you have Adobe CS3 or CS4 installed it should playback in Adobe Media Player). Captioning should be enabled by default, but can be turned off by clicking the ‘captions’ button beneath the video. You will probably want to make some changes once you’ve taken a look. Alterations to the captions text can be made by editing the timed text file (no need to go back into the Flash application). Other alterations may require changing your .fla project file.

When placing your captioned Flash video within a webpage remember that there are four vital files: the caption file (.xml), the playback controls (.swf), the video content (.flv) and the overarching Flash movie file (.swf). All need to be present for the content to be displayed correctly. If you have the required Flash plug-in installed on your machine, you should see our example captioned Flash video file below.

Last updated: 21 October 2009
Published in: Managing your digital resources
Tags: accessibility | delivery | video

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Comments (0)