Captioning for Windows Media
Getting Windows Media Captions on the Web

To Embed or Not to Embed

Embedding means that your media file will display within the web page. This is done by using the object and embed tags within your HTML code. You can easily combine a Microsoft caption file (SAMI) with your movie when embedding. You can also point to an ASX file, which will instruct the embedded media player (plugin) which media files it should play. However, if you are concerned about accessibility, you should not embed Windows Media content into web pages. With embedded Windows Media, the user has little control over the media playback with the keyboard or other assistive device. This is a weakness that we hope Microsoft will soon address. Also, because of changes in Windows Media Player 10, the method for embedding captions within a Web page no longer works on browsers that use the embed tag.

When possible, Windows Media content should to be opened in the standalone Windows Media Player (WMP, for short). When the content is played in WMP, the user has total control over playback using the keyboard, screen reader, or other assistive device. Captions will also display better and their size can be easily modified by users who have visual disabilities.

Embedding Windows Media

Even though this is not the method we recommend, we'll show you how to embed anyway.

Important

Embedding Windows Media introduces several complex issues. The first is that there are two tags required to place Windows Media content into a web page - object and embed. Internet Explorer and Netscape 7+ on Windows use the object tag. All other browsers tend to use the embed tag (unless support for ActiveX and the object tag has been installed by the user). The embed tag is not part of the XHTML standard. Thus, if you wish to be standards compliant with XHTML standards, then you cannot use the embed tag. Until other browsers natively support the object tag, this will limit your ability to be standards compliant.

Embedding involves adding the object and embed tags to your HTML code. The object tag is read by Internet Explorer and browsers that have been user-updated to support ActiveX. The embed tag is read by other browsers (including IE for Macintosh). Here's how:

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="320" height="240">
<param name="URL" value="mediafile.wmv">
<param name="autoStart" value="True">
<param name="uimode" value="none">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="320" height="240" src="mediafile.wmv" showcontrols="0">
</object>

See embedded Windows Media in action
This will place a basic Windows Media Player movie into a web page. There will be no controls for playback. The width and height should be changed to reflect the width and height of your media. This code will work for all major web browsers as long as Windows Media Player is installed. As mentioned above, the embed tag is not allowed in XHTML.

Important

The Windows Media Player 6.4 control uses:

classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

With the release of several versions of Windows Media Player since version 6.4, this classid should no longer be used and should be replaced with the version 7+ control as listed above.

The object tag

The object tag is used by Internet Explorer and other browsers that have ActiveX support. The id attribute uniquely identifies this player from others that may be on the page. It can be any value you would like. The classid is what tells Internet Explorer what kind of media this is. The long classid number must be entered precisely. This code tells IE and other browsers that read the object tag to use the Windows Media Player 7+ control to play the media content. If an up-to-date version of the player is not installed, the user will be prompted to upgrade. Each param element gives additional information to the WMP control.

The URL param above indicates that the media file (mediafile.wmv) is in the same folder as the web page that contains the code. It could also be an absolute value, such as

http://www.webserver.com/movies/mediafile.wmv

or if you are streaming from a Windows Media Server, it will be something like

mms://www.windowsmediaserver.com/mediafile.wmv

If you are using an ASX, WVX, or WAX metafile (as is recommended), then it would be something like

<param name="URL" value="http://www.webserver.com/movies/metafile.asx">

The AutoStart param controls whether the media begins playing or whether it is stopped at the beginning of the media when the page loads.

uimode (user interface mode) determines which controls display at the bottom of the media player. It can be set to invisible, none, mini, or full. Setting uimode to invisible will hide the media player entirely. This can be used for background music for the page, though remember that most users prefer to have the option to disable or turn off sounds within the web page. Sound that plays automatically without user control will also interfere with screen reader output.

Setting uimode to none, as in the example above, will hide all controls. If set to mini, or full, controls will appear at the bottom of the player area. You must add 64 to the height option of your media, otherwise the video display will display in a smaller area because of the vertical space assumed by the controls. Adding 64 to the height will ensure that the video area remains consistent with your media and that the controls are displayed. Setting uimode to mini displays the status window, play/pause, stop, mute, and volume controls, while full displays the status window, seek bar, play/pause, stop, mute, next, previous, fast forward, fast reverse, and volume controls. If you only want to display the controls (such as for audio only playback), set the height to 64 if you want the status window to display and 40 if you do not.

A full list of the param options can be found on this Microsoft site - external link.

The embed tag

Embed is used by most browsers other than Internet Explorer. The type attribute is vital. It tells the browser what program to use to display the content. It must be set to application/x-mplayer2. Pluginspage tells the browser where to send the user if they do not have the Windows Media Player plugin. The src attribute should be the same as in the object tag. Showcontrols tells the player whether to display the controls or not - the value should be set to 1 or 0 (the default is 1, where the controls will be displayed).

Important

Embed tag attributes should be set to 0 for false, 1 for true. Although true and false are supposed to work, they are very buggy. They might work for one attribute, but not another. Always use 1 or 0 for embed tag attributes.

Adding captions to embedded media

The traditional way of adding captions to embedded Windows Media Player content was to add the SAMIFileName attribute to the object and embed tags. This would allow the captions to display within the media window area. Unfortunately, the SAMIFileName attribute is no longer supported by Windows Media Player 9 and 10. If you have Windows Media Player 9 or 10 and you encounter a movie that uses the SAMIFileName captioning method, the captions will not display. And if the Windows Media Player 6.4 control is used, you will see a blank area where the captions should display.

Screenshot showing the blank caption area in the embedded Windows Media Player

With the release of Windows Media Player 10, the media player no longer supports embedded captions when the browser uses the embed tag to display Window Media content. This means if a user has upgraded to Windows Media Player 10 and uses a browser other than Internet Explorer or Netscape 7+ on Windows (or a browser that has been user-updated to support ActiveX and the object tag), the captions will not display. In short, if you embed your media into a Web page, there are no guarantees that the end user will be able to view the captions. This is a strong argument for opening Windows Media content in the stand-alone Windows Media Player, where captions will work regardless of player version or browser.

Note

Windows Media Player for Macintosh does not support captioning at all).

A second and more reliable method for adding captions to embedded Windows Media content involves defining an area within the page wherein the captions will be displayed. This method works fine in version 7+ of Windows Media Player, but only in browsers that support the object tag. Those using browsers that read the embed tag will not be able to view the captions.

Therefore, developers are faced with a distinct problem when embedding Windows Media Player. They have the option of alienating those that have Windows Media Player 9 or 10 (which is most users) or those that have browsers that do not support the object tag (those using most any browser other than Internet Explorer and Netscape on Windows). The best option, as has been repeatedly mentioned, is not to embed the media at all, but to have it open in the stand-alone player. Because most users are updating to new versions and most browsers can be upgraded to support ActiveX components and the object tag, if you are embedding Windows Media, it is recommended that the second method be implemented as described below.

To add captions to embedded Windows Media content, you must first define an area within the page in which the captions will be displayed. You then indicate to the player control that captions should be displayed within that area by using the SAMIFileName and captioningID param elements.

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="320" height="304">
<param name="URL" value="mediafile.wmv">
<param name="autoStart" value="True">
<param name="uimode" value="full">
<param name="captioningID" value="captions">
<param name="SAMIFileName" value="samifile.smi">
</object>
<div id="captions" style="background-color:black; color:white; width:320px; height:70px">
</div>

The relevant portions of the code above have been highlighted. The captioningID value must be the same as the id value of the div area. The SAMIFileName value must be the path to the appropriate SAMI file. The captioning area can be styled, positioned, and sized to whatever is appropriate. You must ensure that it is large enough to show all of your captions.

See example of embedded captions

Important

Because the code above does not utilize the embed tag, browsers that do not have support for ActiveX and the object tag will not be able to view the media or the captions. You may wish to include the embed tag so that this audience can view the media, but the captions will not display because this method of captioning is not supported with the embed tag.

Linking to Your Media File

To increase the accessibility of your media presentation, it is better to open the media file and captions in the Windows Media Player application using an ASX file. The ASX will tell WMP to display your media file and the captions.

Here's a sample ASX file:

<asx version="3.0">
<abstract>Captioning Sample</abstract>
<title>Captioning Sample</title>
<author>Jared Smith</author>
<copyright>2005 - WebAIM</copyright>
<entry>
<ref href="http://www.webserver.com/mediafile.wmv? SAMI=http://www.webserver.com/samifile.smi" />
<title>Captioning Sample</title>
<author>WebAIM.org</author>
<copyright>2005 - WebAIM</copyright>
</entry>
</asx>

Note

The ref tag should be one long line. Do not insert a line break or space after the ?. It is displayed on two lines here to avoid horizontal scrolling in the browser window.

Be sure to use absolute references (http://... or mms://) to the video file and the SAMI file. Now all you have to do is create a link to the ASX file, like this:

<a href="asxfilename.asx">Link label</a>

Here's an example:
Open Captioned Sample in Windows Media Player

Note: Due to incompatibilities with some browsers to properly access local media files, the above file has been given a .wvx file extension.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University