Friday, July 25, 2008

How to Embed Multimedia Video in DITA

This document explains how to implement multimedia video in DITA and how to transfer them to HTML format.

Supported Video Formats

The following are currently the most popular multimedia video formats on the Web:

  1. The Shockwave (Flash) Format (.swf)
  2. The Windows Media Format (.wmv)
  3. The AVI Format (.avi)
  4. The MPEG Format (.mpeg)
  5. The QuickTime Format (.mov)
  6. The RealVideo Format (.rm)

Web browsers use the <object> element to render these video files. The <object> element has two child elements: <param> and <embed>. The <param> element defines run-time settings for the object. The <embed> element is added to support browsers that don't support the <object> element. A browser that can parse the object element will ignore the <embed> element. The object element will be used by new browsers that support ActiveX controls. Older browsers will use the embed element.

Based on my research, the newer version of IE (IE 5 and later) accepts the <object> element for all six media types, while other browsers such as Firefox accepts the <object> element for only Flash(.swf) and WMV formats.

The DITA standard doesn’t allow <embed> element within the <object> element. To solve this problem, you need to modify the DITA-OT dita2htmlImpl.xsl to include <embed> element while transforming .avi, .mpeg, .mov, and .rm format video. You can also modify the DITA-OT xsl to support other object formats.

Implement in DITA

<object> element

DITA's <object> element corresponds to the HTML <object> element.

Attributes

The following attributes of the <object> element are required to render video formats:

  • classid: the format of the classid string is "clsid:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" for registered Microsoft ActiveX Controls. It tells the browser which media player to use to play the video.
  • data: the location or URI of the video file. For .avi, .wmv, and .mepg formats, the full direct URI is needed. Other formats only need relative URIs.
  • type (MIME type): indicates the video type.
  • width: the width of the video file in pixels.
  • height: the height of the video file in pixels.

The following table lists the value of classid and MIME type attributes of the six video formats:

format classid MIME Type
swf Can be eliminated application/x-shockwave-flash
wmv Can be eliminated video/x-ms-wmv
avi clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 application/x-mplayer2
mepg clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 application/x-mplayer2
mov clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B video/quicktime
rm clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA audio/x-pn-realaudio

<param> element

At least one child <param> should be included in a <object> to identify the location of the video data file.

Sample Code

The following lists the coding used to implement the video in DITA for the above example:



SWF
<object width="700" height="700" type="application/x-shockwave-flash" data="sample.swf">

<param name="src" value="sample.swf" />
<param name="autostart" value=" false" />
</object>

WMV
<object type="video/x-ms-wmv" data="http://domainname/video/wmvfile.wmv"
width="320" height="260">
<param name="src" value="http://domainname/video/wmvfile.wmv" />
<param name="autostart" value="false" />
</object>

AVI
<object type="application/x-mplayer2" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" data=”http://domainname/video/avifile.avi”>
<param name="src" value=" http://domainname/video/avifile.avi" />
<param name="autostart" value="0" />
</object>

MPEG
<object type="application/x-mplayer2" data="http://domainname/mpegfile.mpeg"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value=" http://domainname/video/mpegfile.mpeg" />
<param name="autostart" value="false" />
</object>

QuickTime movie(mov)
<object type="video/quicktime" width="450" height="230" data="Apple.mov"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="Apple.mov">
<param name="autostart" value="false" />
</object>

Real Video Format
<object type="audio/x-pn-realaudio" width="320" height="240" data="rmfile.rm" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="src" value="rmfile.rm" />
<param name="autostart" value="false" />
</object>

5 comments:

Anonymous said...

Thanks LISHA. This was very helpful! I actually managed to get my .swf to play in my DITA compiled Help output.

Cheers,
George

Lady Diazepam said...
This comment has been removed by the author.
Lady Diazepam said...

Any advice for embedding .screenflow files?

Nee said...

Hi Lisha,

I tried to embed a wmv video in my code but it doesnt work. it only show up the empty player, but the video won't load. I am developing it using SDL live content architect, arbortext editor. Can u help?

Nee said...

my email address is neenee_ooi@yahoo.com