A Guide to Captioning Windows Media and QuickTime Using Subtitle Workshop

With the current focus on accessibility, the demand for captioned Web video is rising. In corporate environments, captions may be preferred as much for reasons of convenience as for disabilities, since it can be difficult to hear narration in a busy workplace. Furthermore, if headphones are not available, turning up the sound on speakers can be distracting to others in the room. If you produce video for the Web, and you want to be sure your audience can access the material in your productions, it's a good idea to provide captions as an alternative to the audio track. (Please see Sidebar 1 about the difference between captions and subtitles.)

In this article, I'll show you how to use an inexpensive software product, Subtitle Workshop, to add subtitles to your video productions. Subtitle Workshop is a Windows application by UruSoft (http://www.urusoft.net/products.php?cat=sw?=1) that allows transcription and ynchronization of caption text to the video in one pass. With Subtitle Workshop, you can transcribe and synchronize ("sync") captions to your video once, and then use the same file to output finished captions that are compatible with many formats — Windows Media, QuickTime, DVDs, etc.

Apart from these benefits, the main reasons for choosing Subtitle Workshop are price (it is "donationware") and usability. There are some minor interface issues with Subtitle Workshop, but I have found it to be much less buggy overall than the closest "freeware" alternative, MAGpie, by CPB/WGBH National Center for Accessible Media (NCAM) (http://ncam.wgbh.org/webaccess/magpie/). However, MAGpie does have two unique features that may be important to some developers. First, it works on the Macintosh as well as Windows, while Subtitle Workshop is for Windows only. Second, MAGpie creates SMIL files automatically; an SMIL file can contain a play list and other settings to control your presentation.

Using Subtitle Workshop

Figuring out how to set up a captioning workflow can be time-consuming and expensive. Fortunately, Subtitle Workshop makes the process much easier. There are really only three steps: setting up, making the transcription, and placing the files on the proper servers.

Setting up

To begin with, you will need to prepare the video file you wish to caption, encoded in Windows Media format. The video file must be fully edited and finished — if you change the length later, you will need to re-synchronize the captions. You can use a small, highly compressed version of the video file to do the captioning as long as the timing is exactly the same as the real thing.

Install and launch Subtitle Workshop

Download Subtitle Workshop from http://www.urusoft.net/products.php?cat =sw?=1 and install it. Launch Subtitle Workshop.

Create a new subtitle file

Choose New Subtitle from the File menu. The first caption line for the new file will appear. (See Figure 1.) This caption line will already be set to "Show at time 00,000 and hide 1 second later," as shown in Figure 1. This line will automatically be selected.

Figure 1 The first caption line in the new subtitle file will automatically be selected.

Set the frame rate

Since we are creating a new subtitle file, "Input Frames Per Second" and "Frames Per Second" should be the same. Set them to equal the frame rate of your video. These numbers should only differ if you will be converting subtitles synched at one frame rate to match another frame rate.

Save the subtitle file

Choose Save from the File menu.

Choose a format

The first time you save the file, a Save as dialog will pop up. (See Figure 2.) This displays rows of output format choices, including QuickTime Text, SAMI (the format used by Windows Media), Real Time, and many others. Find the icon for "SAMI Captioning" in the list, and double-click it.

Figure 2 These are your output format choices.

Choose a location to save the file

Another Save as dialog will appear, this time asking for a location and filename to save the subtitle file. Navigate to your chosen location, type in a file name based on the name of your video file (for example, "videoName.smi"), and click Save. (See Figure 3.) This will save the subtitle file and return you to the list of output formats. This can be a little confusing, but when you see the list of formats again all you need do is click "Cancel" to continue.

Figure 3 Saving the subtitle file.

Start transcribing from the video

At this point, you are ready to begin transcription.

Select the first row of the subtitle file

Make sure the first caption row is still selected. Position your cursor in the Text area below the caption row(s). This is where you will enter text for your captions. (See figure 4.) The caption, as it will be presented, will appear in the table under the heading "Text." In other words, this is similar to Excel, where you don't actually type on each row to add data. You select a given row, and then type into the text-entry area.

Figure 4 Select the line you want to type into.

Open the video you want to caption

Choose Open... from the Movie menu, and navigate to the video file you prepared earlier. Select the video and click "Open." The video will start playing immediately. If you are not ready to actually start, type Ctrl-Space to pause the video. Type Ctrl-Space again to begin playing the video again.

Listen, then type

Listen to only a single phrase (just as much as you can remember!) at a time. To pause the video, type Ctrl-Space. Set the duration endpoint by typing Alt-V. (Alt-V functions as a "new paragraph" code in Subtitle Workshop.) Then type what you just heard.

Insert the next line

Hit the Insert key once to create a new line.

Repeat the process

Type Ctrl-Space to resume the video playback. Listen to the second phrase, and type Ctrl-Space again to pause the video. Set the endpoint by typing Alt-V Type what you just heard.

Save the completed SAMI file

Continue until you reach the end of the video. Choose Save from the File menu. Now you have a complete SAMI file. If you open it in a text editor, it will look something like Sidebar 2.

<SAMI>
  <HEAD>
      <STYLE TYPE="Text/css">
      <!--
          P {margin-left: 29pt; margin-right: 29pt; font-size:
          10pt; text-align: center; font-family: Arial; color: #FFFFFF;
          background-color: #000000;}
          .SUBTTL {Name: 'Subtitles'; Lang: en-US; SAMIType: CC;}
        -->
  </STYLE>
 
 </HEAD>
      <BODY>
          <SYNC START=385>
              <P>Music plays
          <SYNC START=9717>
              <P> 
          <SYNC START=10737>
              <P>First line of spoken text
          <SYNC START=15014>
              <P> 
                  ... etc ...
      </BODY>
  </SAMI>

You will probably notice that the SAMI file looks very much like an HTML file, with some specialized tags. In the HEAD section, there is a style sheet that controls the look of your captions and also sets some parameters that Windows Media Player understands: Name, Lang and SAMIType. You can change the font size and positioning of your captions by altering the style settings for the

tag, using a text editor or BBEdit. Save a copy of this SAMI file ("videoName.smi") to your Web server.

Putting it all together

At this point, you have everything you need to assemble your video and the captions. The next steps depend on whether your video will play externally in Windows Media Player, or embedded in a Web page.

Video plays in external player

To view the video in the stand-alone Windows Media Player, you will need three files:

1.The video file

The video should be located on a Windows Media streaming server, if possible, or on a Web server. Note the URL of the file. If the video is saved as a streaming file, it will have an mms://prefix, such as mms://your.streamingserver.com/videofile.wmv

If the file is saved on a Web server, the address will have a normal http://prefix such as http://your.server.com/videofile.wmv

2. The SAMI file

The SAMI file will be saved on your Web server. Note the URL of the file. It will be something like http://your.server.com/videoName.smi

3. An ASX file

An ASX file is just a little XML (text) file, saved to your Web server, that contains information about the media file stream and its presentation. When you open an ASX file with Windows Media Player, the media files listed will be played in order. Besides the play list, an ASX file can specify a corresponding caption (SAMI) file for each media file, and can also specify parameters such as volume, starting point in the video, or duration. See the MSDN site, "Windows Media Metafile Elements Reference" (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/windowsmediametafileelementsreference.asp) for a list of the elements you can put in an ASX file. (Editor's Note: If you have difficulty with the long URLs in this article, try searching on the given title in Google. For example, in this case, search on "Windows Media Metafile Elements Reference.")

To create your ASX file, open your text editor and enter the code shown in Sidebar 3. Change the paths shown to the URLs you just noted — the path to the video and the path to the SAMI file. Make sure to leave the question mark (?) between the two paths.

<ASX version="3.0">
        <ENTRY>
            <REF
            HREF="mms://your.streamingserver.com/videofile.wmv?
        sami=http://path.to.sami/videoName.smi"/>
        </ENTRY>
    </ASX>

Save this file as "videoName.asx" and put it on your Web server. To play the captioned video, put a link to the ASX file on any Web page:

<a> href="http://your.server.com/videoName.asx"> Click to play video </a>

When the link is clicked, Windows Media Player will open and play the captioned video. However, be sure to instruct people to turn captions on in Windows Media Player, or they will not be able to see the captions. In Windows Media Player v. 9, captions are turned on by selecting Captions and Subtitles from the Play menu, and then selecting On if available from the submenu.

Video embedded in Web page

If you want to display the captioned video embedded within a Web page instead of in a separate player, you will need one additional file, namely an HTML file containing code for the embedded player object.

Open your text editor and enter the code shown in Sidebar 4. Save this file as HTML on your Web server: e.g.., "captionTest.htm".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <HTML>
      <HEAD>
          <TITLE>Closed Captioning Example</TITLE>
 
          <!-- the following style sheet controls the look of the div
                  containing the captions.-->
 
          <style>
              <--
                  #CapText1 {
                  font-family: Arial, Helvetica, sans-serif;
                  font-size: 12px;
                  text-align:center;
                  background-color:#000000;
                  width:300px;
                  height:80px;
                  color: #FFFFFF;
              }
                  -->
          </style>
      </HEAD>
      <BODY>
          <!-- the OBJECT tag contains the settings to create the
                  Windows Media Player ActiveX control 
                  in the Web page in IE for PC. 
                  The Embed tag is contained within 
                  the OBJECT tag to support non-IE browsers 
                  which use a plug-in to create the
                  Media Player-->
 
          <OBJECT classid = clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6
                  height = 300 id = "Player1" width = 300>
              <param name = "AutoStart" value = "1">
              <param name = "CaptioningID" value = "CapText1">
              <param name = "ShowCaptioning" value="True">
              <param name = "URL" value = "videoName.asx">
 
              <!--The Embed tag displays the Netscape 
                  Plugin Windows Media Player, 
                  which understands a somewhat 
                  different set of parameter
                  names-->
 
              <embed TYPE = "application/x-mplayer2"
                  width="300"
                  height="360"
                  ID="Player1"
                  src="videoName.asx"
                  autostart="1"
                  autosize="0"
                  samifilename="videoName.smi"
                  showcaptioning="1" >
              </embed>
 
          </OBJECT>
          <!-- this DIV creates a partition for a closed caption text
                  display in IE for PC -->
 
          <DIV name ="CapText1" id = "CapText1"></DIV>
      </BODY>
  </HTML>

If the ASX file, SAMI file and this HTML file are not all in the same directory (as assumed in the code above), you will need to change the paths shown in red to the correct ones. They can be relative or absolute paths. For example:

<param name = "URL" value = "videoName.asx">
src="videoName.asx" 
samifilename="videoName.smi"

That's all there is to it! To play the video, simply open the HTML page "captionTest.htm" in a Web browser. If you are using Internet Explorer for PC, the captions will show up in their own area below the player. If using another browser, they will show up in the player itself.

Does this work in all browsers?

When embedding Windows Media in Web pages, a key issue to keep in mind is what the differences are between the technologies used by different browsers to create the embedded player. Internet Explorer and Netscape 7 for PC use ActiveX controls, while most other browsers, including all Mac browsers, use Netscape Plug-in technology to create the player. The plug-in is older technology and is no longer actively supported by Microsoft, so it lacks many of the features of the ActiveX version.

The two player types must be called individually, using a combination of the OBJECT and EMBED tags. To ensure that most browsers will be able to play the video, you should place the EMBED tag nested within the OBJECT tag as shown in the sample HTML code in Sidebar 2. ActiveX-enabled browsers will ignore the EMBED tag inside the OBJECT tag. Browsers using the Windows Media Plug-in will not recognize the OBJECT tag and will read only the EMBED tag. The parameters you select for each type of player can be different on the same page, and they may actually have to be, to take into account the differing functionality of both players.

The "CaptioningID" setting — one important difference

For example, the ActiveX player can position captions within almost any labeled block element anywhere on the page. In the HTML shown in Sidebar 4, I have used a "div" with the ID of "CapText1." The look of the div and the captions within it are controlled by a style sheet in the head section: #CapText1. (Editor's note: Confused by "div"? See the Editor's Note in Sidebar 4.) The captions appear within CapText1, below the player interface.

Browsers which use the Netscape plug-in will place the captions inside the player, just below the video. Since the player will usually shrink the video to fit, the height given for the EMBED tag has been adjusted to 360 pixels from the 300 pixels specified in the OBJECT tag.

You may wish to add JavaScript to detect browsers and/or players, and you may also wish to rewrite the style sheet to hide or display the CapText1 div depending on the player being used. An example of a browser detection script is given in "Getting Fancy, Part II: Detecting Browser Version and Platform" (http://www.streamingmediabible.com/html/streammag_200305.html).

An example of a way to detect media players and connection speed is shown in, "Detecting Streaming Media Players and Connection Speed Tutorial" (http://www.streamingmedia.com/article.asp?id=8396&c=6).

Table 1 summarizes some of the most important differences between browsers with respect to caption display.

A simpler way to handle potential problems would be to give your viewers a fallback link-in directly to the ASX file that will play the video with captions in a standalone Windows Media Player, if the embedded player does not work for them. For example:

<a href="http://your.server.com/videoName.asx">Click here to play video in a separate player</a>

What else can I do with an embedded player and captions?

The sample HTML given is just a start. Players can be embedded in custom "skins" with custom controls. You can hide the interface and make the player and CaptioningID area look like part of the page or image. The ActiveX player can be scripted to respond to events that happen anywhere in the page. Multiple players can be placed in one page, and controlled by JavaScript.

Captions can include simple HTML, and do not have to look like normal white on black captions — they could appear to be a PowerPoint slide, for example. Captions can show anywhere on the page, and I sometimes put them just to the right of the player when space is tight. You might want to create controls that allow your viewers to switch style sheets in order to make the captions larger or smaller, or to change the text and background color if viewers have trouble reading them.

Additional Windows Media Player references

For a complete list of all commands understood by the Windows Media Player (the ActiveX Player) see the list of PARAM tags for Windows Media Player 10 on MSDN, "Using the Windows Media Player Control in a Web Page" (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/usingtheplayercontrolinawebpage.asp)

A list of the set of parameters understood by the Windows Media Player Plugin for Mac OS X is online at "Windows Media Player for Mac Guide for Internet Content Providers: Embedding the Player in a Web Page: Object Model" (http://www.microsoft.com/windows/windowsmedia/howto/articles/macicp.aspx#object_model__phih )

The best exposition of the differences between the ActiveX Player and the Plugin that I have been able to find is given in parts III and IV of "A Streaming Media JukeBox." This article is a tutorial on creating a streaming media jukebox that works on all browsers, and contains a list of the methods that can be used with the Windows Media control, and the A-E section of a chart comparing all the properties of the ActiveX control with those of the Plug-in. See "A Streaming Media JukeBox, Part III: Browser Independent" (http://www.webreference.com/js/column53/index.html )

The continuation of the previous article's comparison of player properties, containing the rest of the alphabetical chart, F-W, is located at "A Streaming Media JukeBox, Part IV: F-W Properties" (http://www.webreference.com/js/column54/index.html )

Captioning QuickTime with Subtitle Workshop

Subtitle Workshop works well for QuickTime, but I've found that the built-in settings for writing QuickTime text files are incorrect.

Create a custom QuickTime format

To fix the settings for QuickTime you will need to create a custom format, as follows.

Open a new file in your text editor, and enter the following lines:

    [Information]
    Name=Quicktime2
    Extension=*.txt
    Time structure=hh:mm:ss.zz
    Time=True
    FPS=15
    New line char=[Enter]
 
    [Format text]
    {QTtext} {font:Tahoma}
    {plain} {size:10}
    {timeScale:10}
    {height:40}
    {width:320}
 
    {timeStamps:absolute} {RepeatSub}
    [{swStart}]
    {swText}
    {EndRepeat}
 

Save the text file

Save the new format file as "Quicktime2.cfp" in this directory: C:\Program Files\UruSoft\Subtitle Workshop\CustomFormats

When you next open Subtitle Workshop and choose Save As from the file menu, you will see the new "Quicktime2" icon listed among all the other formats.

Work in SAMI format to begin with

Subtitle Workshop behaves a little strangely if the format you are working in is not SAMI or one of its native formats. It will bring up the Save as dialog every time you try to save while working, and ask you to select a format. This can be both irritating and confusing.

As a workaround to avoid this behavior, I suggest working in the SAMI format as described above under Getting Ready until you have finished transcribing your text.

Save to QuickTime Text

When you are ready to save a copy as QuickTime Text, first select Save to save the final version in SAMI format as a backup. Then select Save As and the Save As dialog will pop up. Double-click on the icon for Quicktime2 format. Save the file as videoName.txt.

Put this file on your Web server. If you open this text file, it should look something

    {QTtext} {font:Tahoma}
    {plain} {size:10}
    {timeScale:10}
    {height:40}
    {width:320}
 
    [00:00:00.00]
    This is the first line of text
    [00:00:04.20]
    This is the second line of text
    [00:00:06.00]
    This is the third line of text
    [00:00:11.13]
    This is the fourth line of text (etc...)

Linking the QuickTime video and captions

We will use a SMIL file to link the video and caption files. As I noted earlier like this:

a SMIL file is similar to an ASX file: it can contain a play list and other settings to control your presentation. In this case, we will use it to specify which text file to use as the text track for your movie.

Create a new text file containing the code shown in Sidebar 5.

SMILtext
  <?xml version="1.0" encoding="UTF-8"?>
      <smil xmlns:, ="http://www.apple.com/quicktime/resources/
        smilextensions"
        xmlns="http://www.w3.org/TR/REC-smil" 
        qt:timeslider="true">
      <head>
          <meta name="title" content=""/>
          <meta name="author" content=""/>
          <meta name="copyright" content=""/>
          <layout>
              <root-layout height="335" width="330" 
            backgroundcolor="black"/>
              <region height="240" width="320" 
            background-color="black"
                      left="5" top="5" id="videoregion"/>
              <region id="textregion" 
            height="80" width="320" 
            backgroundcolor="black" 
            left="5" top="245"/>
          </layout>
      </head>
      <body>
          <par dur="0:33:13.69">
              <video dur="0:33:13.69" region="videoregion"
                      src="videoName.mov"/>
              <textstream dur="0:33:13.69" region="textregion"
                      src="videoName.txt"/>
          </par>
      </body>
  </smil>
 
Change the line 
<video dur="0:33:13.69" region="videoregion" src="videoName.mov"/>
to reflect the correct path for your video. 
 
If  your video is on a streaming server, the path may look like 
src="rtsp://path.to.yourserver/ videoName". Also type in the correct 
path to the QuickTime text file you just created in the line:<p> </p><textstream dur="0:33:13.69"region="textregion"src="videoName.txt"/>

Save the new text file as "filename. smil" and put it on your Web server.

Embedding QuickTime video in a Web page

To display the video embedded in your Web page, you will need to use a combination of OBJECT and EMBED tags similar to the procedure described above for Windows Media.

Example HTML is given in Sidebar 6.

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>UntitledDocument</title>
        <metahttp-equiv="Content-Type" content="text/html;
                charset=iso-8859-1">
    </head>
    <body>
        <objectclassid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
            codebase="http://www.apple.com/qtactivex/qtplugin.cab"
            height="319"width="388">
 
        <paramname="src" value="http://path.to/filename.smil">
        <paramname="autoplay" value="true">
        <paramname="controller" value="true">
        
    <embedheight="319" 
        pluginspage=http://www.apple.com/quicktime/download/
        src=http://path.to/filename.smil
            type="video/quicktime"
        width="388"
        controller="true"
        autoplay="true">
    </embed>
        
        </object>
    </body>
</html>

Be sure to set the correct path to your SMIL file in both the

<param name="src" value="http://path.to/filename.smil">
and the 
src=http://path.to/filename.smil lines.

Additional QuickTime references

Find information about importing text tracks into QuickTime movies (embedding the caption track WITHIN the movie itself) online at http://www.apple.com/quicktime/tools_tips/tutorials/texttracks.html

There is a nice online overview of captioning QuickTime movies at "Course: REHAB711: Multi-media Captioning: QuickTime, SAMI": http://cita.rehab.uiuc.edu/courses/2001-10-REHAB711NC/lec13/

You can find further information on embedding SMIL-controlled QuickTime in Web pages at http://developer.apple.com/documentation/QuickTime/IQ_InteractiveMovies/quicktimeandsmil/chapter_10_section_5.html

Documentation from the National Center for Accessible Media, for captioning QuickTime, Windows Media, and Real Media with MAGpie (Media Access Generator), is available at http://ncam.wgbh.org/webaccess/magpie/

Articles on video editing in The eLearning Developers' Journal

The Journal has published two particularly useful articles by Stephen Haskin on video editing:

"Repurposing Taped Video for e-Learning Part I: From Tape to Hard Drive." (March 3, 2003)

"Repurposing Taped Video for e-Learning Part II: From Hard Drive to Optimized Video File" (March 10, 2003)

Closing notes on hardware needed for captioning

Subtitle Workshop runs only on Windows PC's, but unless you are also editing or encoding video, you can get away with a less than top-of-the-line workstation. You could even do captioning on a laptop or a normal desktop PC. If your computer is particularly short on resources, request a highly compressed, smaller version of the video. The timing is what's important here, and that must remain identical between the high resolution version and the version used for captioning.

Headphones are useful while captioning, and I have found that Plantronics makes some great USB headsets that are trouble free.

Comments

Login or subscribe to comment