Adding Closed Captions to Digital Media Page 1 of 6
Total Page:16
File Type:pdf, Size:1020Kb
Adding Closed Captions to Digital Media Page 1 of 6 MSDN Home > MSDN Library > Graphics and Multimedia > Audio and Video > Adding Closed Captions to Digital Media Page Options Kim Vu Average rating: Digital Media Division 3 out of 9 Microsoft Corporation Rate this page August 2001 Print this page Summary: This article details what you need to know about adding closed captions E-mail this page to your digital media content and embedding the Microsoft Windows Media Player ActiveX control object model in a Web page. (8 printed pages) Add to Favorites Contents 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 http://msdn.microsoft.com/library/en-us/dnwmt/html/wmp7_sami.asp?frame=true 9/20/2004 Adding Closed Captions to Digital Media Page 2 of 6 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é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 http://msdn.microsoft.com/library/en-us/dnwmt/html/wmp7_sami.asp?frame=true 9/20/2004 Adding Closed Captions to Digital Media Page 3 of 6 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 = "http://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.