Subtitle Workshop, by Urusoft is free captioning software (donation-ware) which allows you to easily transcribe and edit captions and output the resulting file to many different formats. I’ll be focusing on Windows Media format here, but you will find this a useful tool for captioning DVD’s, Quicktime, and Flash as well.

Note: A much more complete exposition of the concepts summarized in this tutorial is available to members of the Elearning Guild in the article A Guide to Captioning Windows Media and QuickTime Using Subtitle Workshop

You can download Subtitle Workshop here. Once it is installed, launch the application, and follow the steps to create a caption file that can be used in the stand-alone or HTML-embedded Windows Media Player.

Before you begin, your video must be completely edited to its final duration and saved in a format that can be opened by Subtitle workshop, such as Windows Media. It does not have to be at full size, however. For example if your final video is 640×480, you could do the captioning on a 320×240 file, which could save time, space, and enable you to use a lesser computer for this stage of your video workflow.

Creating synced captions

  1. Begin by creating a new subtitle file. Selecting File>New Subtitle. This will add your first caption row.
  2. Set Input Frames per Second and Frames per Second to equal the frame rate of your video.
  3. Select File>Save. Since this is your first save, Subtitle Workshop will ask you what format you want to use. For use with Windows Media, choose SAMI captioning. Next you will be asked for a location and filename. I usually choose a filename similar to the video filename, so I can keep track of what captions go with what video.
  4. Select Movie>Open, and find the video file you want to caption. The video will start playing, so if you aren’t ready to start captioning yet, type control-spacebar to pause the video. Control-spacebar toggles between play/pause.
  5. Select the first caption row (it may already be selected). Hit control-spacebar to start the video. Listen to a single phrase, then pause the video by hitting control-spacebar again. Immediately type Alt-V to set the duration of the first caption.
  6. Click in the large text field under the caption row. This is where you will type what you hear. As you type, the caption will appear in the "Text" column in the selected caption row.
  7. When you have finished the first line, hit the Insert key to create a new caption row.
  8. Type control-spacebar to start the video again. Try to memorize the key sequence: control-space to play, control-space to pause , Alt-V to set the duration. It will make the captioning process go much more smoothly.
  9. When you reach the end of the video, select File>Save.

Open your saved SAMI file in a text editor. At the top of the file is a style sheet that controls the size and color of your captions, and also sets some Windows Media-specific parameters. You can change the size, color, margins, etc. here. Upload the SAMI file to your web server. Upload your video file to a streaming server or a web server.

Add a captioned Windows Media player to your web page

1. Create the object and embed tags, and add appropriate parameters.

2. Create 2 asx files, one for the PC, which references the SAMI file, and one for the Mac which doesn’t.

  • Note regarding Mac browsers: playing the captions in the embedded player requires control of parts of the player object that Mac browsers cannot access. To give your Mac users the option of viewing captions in Windows media, provide a link to the asx file with instructions to open it in Windows Media Player 9 and turn on captions. Unfortunately Flip4Mac will not play the captions. This is not a great solution, since usually some proportion of your users will have no idea how to do this.
  • If the video is housed on a streaming server, the protocol prefix of the URL used in the REF tag will be "mms://" If it is on a web server, it will be "http://"
  • The path to the SAMI file must be an absolute path. Relative paths will not work.
<ASX version="3.0"> 
   <ENTRY> 
   <REF HREF="mms://your.streamingserver.com/videofile.wmv?sami=http://path.to.sami/videoName.smi"/> 
   </ENTRY> 
 </ASX>

 

An easy way to get a head start on creating the HTML for an embedded windows media player is to use this generator provided by UCSF’s Center for Instructional Technology. This will create the basic object tag, embed tag and associated parameters. Once you have these basics, you will have to add the captioning-related items shown in red below.

 

This is an example HTML page showing the embedded player.

<!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 plugin 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>

ActiveX issues

In February, 2006, Microsoft made changes to Internet Explorer to get around the EOLAS patent, after being sued for infringing on it. The changes made it necessary for IE users to click to activate any element within an "OBJECT" tag: this includes Flash, Shockwave, video, java applets and other plugin technologies. Besides some inconvenience, this negatively impacts the usability of HTML pages, because users sometimes don’t notice that they need to click, despite the alerts and messages IE attempts to display. Web developers have come up with several workarounds. Since javascripted embedding does not infringe on the patent, a typical approach is to convert the content of the OBJECT tag to a javascript "write" statement. This must be in an external script to be eliminate the "click to activate".

If you use Dreamweaver, it will automatically apply a fix to your page, if you have the preferences set up correctly.

There are several other methods of getting around the problem. One dynamically replaces a "noscript" tag with the required object tag and its contents. I haven’t tested this, but you can try it here: http://www.ediy.co.nz/click-to-activate-and-use-this-control-fix-for-internet-explorer-xidc20771.html

Putting all the pieces together

You now have 4 files:

  • The windows media video ("myvideo.wmv")
  • The SAMI file created with Subtitle Workshop ("myvideo.smi")
  • The ASX file ("myvideo.asx")
  • The HTML file ("videoplayer.html")

The video file goes on the streaming server, or if it is set up for progressive download, put it on your web server. The other three files go on your web server.

Additional Reference