Adding Closed Captions to Digital Media

Article
03/19/2007

Kim Vu
Digital Media Division
Microsoft Corporation

August 2001

Summary: This article details what you need to know about adding closed captions to your digital media content and embedding the Microsoft Windows Media Player ActiveX control object model in a Web page. (8 printed pages)

Introduction
About SAMI Files
Using SAMI with the Windows Media Player Control in a Browser
About SAMI URLs
For More Information

Introduction

It is increasingly important to create Web content that is accessible to everyone. By including closed captions with your audio or video content, you allow for a more diverse audience to experience your digital media presentations. From helping people with disabilities to translating for the international business partner, Synchronized Accessible Media Interchange (SAMI) and Microsoft® Windows Media™ Player can provide a closed-caption solution for your digital media content. This article details what you need to know about adding closed captions to your digital media content and embedding the Microsoft Windows Media Player ActiveX® control object model in a Web page.

Synchronized Accessible Media Interchange (SAMI) is a file format designed to deliver synchronized text such as captions, subtitles, or audio descriptions with digital media content. Integrated in a Web browser using the Microsoft Windows Media Player 7 object model, SAMI is a powerful tool that promotes accessibility. By using SAMI, you can create rich media content that reaches a larger, more diverse audience. In addition to standard fonts, SAMI can support other text styles, such as different colors, sizes, or languages, to aid a variety of users. SAMI can be especially useful for individuals who have low vision or those who are deaf or hard-of-hearing. The SAMI format can also assist in educational purposes, such as teaching students a second language.

This article focuses on the incorporation of SAMI with the Microsoft Windows Media Player 7 ActiveX control object model. SAMI files exist independently from digital media files and do not rely on a specific video or audio format to function. Since the files are separate, the Player control will fetch, parse, synchronize, and render each file on the client computer. This provides for added flexibility and functionality because it allows for the editing of individual SAMI files, the incorporation of the SAMI file with different digital media formats, and the storage of SAMI files on different server locations.

About SAMI Files

SAMI files are text files that have an .smi or .sami file name extension. They contain the text strings used for synchronized closed captions, subtitles, and audio descriptions. They also specify the timing parameters used by the Windows Media Player control to synchronize closed caption text with audio or video content. When a Windows Media file reaches a time designated in the SAMI file, the text changes accordingly in the closed caption display area of the Web page.

Other than a simple text editor (such as Microsoft Notepad, Microsoft Word, or Apple SimpleText), special software is not required to create a SAMI file. Moreover, an extensive programming background is not needed to create SAMI files. In fact, if you are already familiar with Hypertext Markup Language (HTML), you will notice many similarities in flexibility, layout, and syntax. SAMI and HTML share common elements, and tags must always be used in pairs; for example, a <BODY> tag must always close with a </BODY> tag.

A basic SAMI file requires three fundamental tags: <SAMI>, <HEAD>, and <BODY>. The <SAMI> tag identifies the document as a SAMI document, so other applications recognize its file format. Between the <HEAD> and </HEAD> tags, you define basic guidelines and other format information for the SAMI document, such as the document title, general information, and style properties for closed captions. Like HTML, content declared within the HEAD element does not display as output. Elements and attributes defined between the <BODY> tags display content seen by the user. In SAMI, the BODY element possesses the parameters for synchronization and the text strings used for closed captions.

Defined within the HEAD element, the STYLE element provides for added functionality in SAMI. Between the <STYLE> tags, you can define several cascading style sheets classes for style and layout. Style properties such as fonts, sizes, and alignments can be customized to provide a rich user experience, while also promoting accessibility. For example, defining a large text font style class can improve the readability for users who have difficulty reading small text. In addition, by defining several different language classes, you can help international users better understand the digital media content.

SAMI File Sample

The following sample is a complete SAMI file with one set of closed caption text and several class declarations for text style and caption language.

<SAMI>
<HEAD>
<STYLE TYPE = "text/css"><!--
<!--P defines the style class for closed caption text-->
   P {font-family:sans-serif; color:white;}
<!--Source, Small, and Big defines additional style classes for closed 
caption text-->
      #Source {color:orange; font-family:arial; font-size:12pt;}
      #Small {Name:SmallTxt; font-size:8pt; color:yellow;}
      #Big {Name:BigTxt; font-size:12pt; color:magenta;}
<!—ENUSCC and FRFRCC defines language classes for closed caption text-->
      .ENUSCC {Name:English Captions; lang: en-US; SAMIType:CC;}
      .FRFRCC {Name:French Captions; lang: fr-FR; SAMIType:CC;}-->
   </STYLE>
</HEAD>
<BODY>
<!—First set of closed caption text starts to play at 1000 ms-->
   <SYNC Start = 1000>
<--First set of English closed captions-->
      <P Class = ENUSCC ID = Source>Narrator
      <P Class = ENUSCC>Great reason to visit Seattle, brought to you by 
two out-of-staters.
<--First set of French closed captions-->
      <P Class = FRFRCC ID = Source>Narrateur
      <P Class = FRFRCC>Deux personnes ne venant la r&eacute;gion vous 
donnent de bonnes raisons de visiter Seattle.
</BODY>
</SAMI>

For detailed information about creating SAMI files, see the Microsoft Accessibility page on the Microsoft Web site.

Using SAMI with the Windows Media Player Control in a Browser

By embedding the Microsoft Windows Media Player ActiveX control in a Web page, you can customize the user experience. Incorporating closed captions by this method provides the user with convenience, flexibility, and ease of management. Instead of creating a SAMI file for each font style or language, you can declare different style classes in one file by using basic scripting and the Player control objects. With these methods and properties, you can create custom controls that enable the user to choose between the different style options. Furthermore, you have complete control over the design of the Player interface and the customization of each function.

For detailed information about embedding the Windows Media Player control in a Web page, download the Windows Media Player Software Development Kit (SDK) from the Windows Media Technologies page on the Microsoft Web site.

After embedding the Windows Media Player control in a Web page, the page needs to be configured to support closed captions. With Windows Media Player 7 or later, a special set of objects exists for SAMI captioning specification and file retrieval. The Player control objects for SAMI include the root Player object and the child closedCaption object.

About the Closed Caption Object

The Player.closedCaption object exposes four specific properties: SAMIFileName, SAMILang, SAMIStyle, and CaptioningID.

The SAMIFileName Property

The closedCaption.SAMIFileName property specifies or retrieves a string value that represents the full path name of the SAMI file that contains the closed captioning information. The following is an example of how to define the SAMIFileName property with a URL.

Player.closedCaption.SAMIFileName = "https://MYserver/media/samiFile.smi";

The SAMILang Property

The closedCaption.SAMILang property specifies or retrieves a string value indicating the language displayed for closed captioning. If a language is not specified, the first language defined in the SAMI file becomes the default closed captioning language. The following example is of how to define the SAMILang property with a language selection.

Player.closedCaption.SAMILang = "languageName";

If you want to provide users with a selection of several different languages, the SAMILang value must be specified dynamically. For example, if the user selects a language that is different from the default language, you must write script in the HTML file of the Web page that changes the value of the SAMILang property to match the language the user selects. The following example specifies a new value for the SAMILang property, which causes the Player to display the captions in the language requested by the user.

<SELECT id = "CaptionsStyle" language = "JScript" name = CCStyle 
onchange="Player1.closedCaption.SAMILang = CCLang.value"> 
  <OPTION selected value = SmallTxt>Small Text
  <OPTION value = NormalTxt>Normal Text
</SELECT>

The SAMIStyle Property

The closedCaption.SAMIStyle property specifies or retrieves a string value representing the closed captioning style for text and layout. If no style is specified, the first style defined in the SAMI file becomes the default. The following is an example of how to define the SAMIStyle property with a style class name.

Player1.closedCaption.SAMIStyle = "styleClassName";

If you plan to provide several predefined text styles for the user to select, you must dynamically specify the SAMIStyle value. With some basic scripting, you can create a method that will assign the value of the user's selection to the SAMIStyle property.

<SELECT id = "CaptionsStyle" language = "JScript" name = CCStyle 
onchange="Player1.closedCaption.SAMILang = CCLang.value"> 
  <OPTION selected value = SmallTxt>Small Text
  <OPTION value = NormalTxt>Normal Text
</SELECT>

The captioningID Property

The closedCaption.captioningID property specifies or retrieves a string value that represents the name of the frame assigned to display closed captions. The following is an example of how to define the captioningID property.

Player1.closedCaption.captioningID = "frameName";

To create a closed captions display in your Web page, you can use an HTML DIV or SPAN element. The DIV and SPAN elements partition the Web page and support special attributes for customizing the frame. The following is an example of how to assign an id name value to the DIV element.

<DIV id = "partitionName"></DIV>

The DIV element has an id attribute that uniquely identifies the frame. The captioningID property retrieves this string, and Windows Media Player displays the closed caption text within the frame specified in the DIV element.

<HTML>
<HEAD>
<SCRIPT language = "JavaScript" for = "window" event = "onload"><!--
Player1.closedCaption.captioningID = "CapText";
</SCRIPT>
</HEAD>
<BODY>
<DIV style = "width:300; background-color:black;" id = CapText></DIV>
</BODY>
</HTML>

Embedded Player Control Sample

The following is a complete sample of an embedded Windows Media Player control that displays SAMI closed captions in a Web page. It includes controls to allow the user to select font style and foreign language.

<HTML>
<HEAD>
<TITLE>Closed Captioning Example</TITLE>
<!--Onload event handler preloads the object controls and properties-->
<SCRIPT language = "JavaScript" for = "window" event = "onload"><!--
Player1.closedCaption.captioningID = "CapText";
Player1.closedCaption.SAMIFileName = ".\\..\\media\\ccsample1.smi";
Player1.closedCaption.SAMILang = CCLang.value;
Player1.closedCaption.SAMIStyle = CCStyle.value;
Player1.URL = ".\\..\\media\\seattle.wmv";-->
</SCRIPT>
</HEAD>
<BODY>
<!--OBJECT opens the Windows Media Player ActiveX control in the Web 
page-->
<OBJECT classid = clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6 height = 300 
id = Player1 width = 300> 
<param name = "AutoStart" value = "0">
</OBJECT><BR>
<!--DIV creates a partition for a closed caption text display-->
<DIV style = "width:300; background-color:black"; id = CapText></DIV>
<!--SELECT creates a menu with Small and Big text size options. SAMIStyle 
is equal to the user's selection-->
<SELECT id = "CaptionsStyle" language = "JScript" name = CCStyle 
onchange = "Player1.closedCaption.SAMIStyle = CCStyle.value"> 
  <OPTION selected value = SmallTxt>Small Text
  <OPTION value = BigTxt>Big Text
</SELECT> 
<!--SELECT creates a menu with English and French language options. 
SAMILang is equal to the user's selection-->
<SELECT id = "CaptionsLang" language = "JScript" name = CCLang 
onchange = "Player1.closedCaption.SAMILang = CCLang.value"> 
  <OPTION selected value = "English Captions">English
  <OPTION value = "French Captions">French
</SELECT> 
</BODY>
</HTML>

About SAMI URLs

The Uniform Resource Locator (URL) link used in SAMI specifies a path to the location of the SAMI file and Windows Media file. The special URL link associates a Windows Media file to the appropriate SAMI file. The following is an example of the proper syntax for a SAMI URL:

full location path of the media file**?sami=**full location path of the SAMI file

The SAMI URL syntax is commonly used in a hyperlink or a Windows Media metafile. By using the SAMI URL in a hyperlink, the hyperlink directly links to the location of the digital media file and SAMI file. When the user clicks on the hyperlink, the Player launches in full mode and plays the digital media content. In order for the Player to display closed captions, on the View menu, click Now Playing Tools, and then click Captions. The following HTML sample creates a link to a Windows Media file with closed captions.

<HTML> 
<HEAD> 
<TITLE> "Creating a Hyperlink to a Media File" </TITLE>
</HEAD>
<BODY>
Click <A href="https://netshow.microsoft.com/ms/enable
/NBDC-110.asf?sami=https://www.microsoft.com/enable/download/abletowork
/Oct25_NBDC.smi">here</a> to play the file.
</BODY> 
</HTML>

In the preceding example, the <A href= "URL"></a> tag creates a hyperlink to the specified URL location. The first location defined in the URL, https://netshow.microsoft.com/ms/enable/NBDC-110.asf, specifies the location of the digital media file. The ? symbol acts as a separator between the digital media file location and the SAMI file location. The second location defined after the separator, https://www.microsoft.com/enable/download/abletowork/Oct25\_NBDC.smi, specifies the location of the SAMI file.