Object Embedding

From DreamHost
Jump to: navigation, search

This article attempts to explain how to embed multimedia objects into XHTML or HTML, using a web standards approach. The examples given are written in XHTML, but may be easily adapted to HTML.

The object element

The object element was created to provide a way to include rich media in HTML and XHTML documents. By nesting objects, it is possible to cope with browsers that don't support certain objects. Instead of using the non-standard embed element to feed multimedia to non-IE browsers, it is better to use Microsoft's conditional comments system in combination with object nesting.

Quicktime

Video

The ability to embed Quicktime .mov files on websites is particularly popular with DreamHost customers:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="320" height="260">
  <param name="src" value="movie.mov" />
  <param name="autoplay" value="true" />
  <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
  <param name="controller" value="true" />
  <!--[if !IE]> <-->
    <object data="movie.mov" width="320" height="260" type="video/quicktime">
      <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
      <param name="controller" value="true" />
    </object>
  <!--> <![endif]-->
</object>

Audio

In this example, an .mp3 file is being played:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="200" height="16">
  <param name="src" value="audio.mp3" />
  <param name="autoplay" value="true" />
  <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
  <param name="controller" value="true" />
  <!--[if !IE]> <-->
    <object data="audio.mp3" width="200" height="16" type="video/quicktime">
      <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
      <param name="controller" value="true" />
    </object>
  <!--> <![endif]-->
</object>

Streaming from the Darwin Streaming Server

Rather than a simple embedding of a Quicktime movie, it is possible to make use of the Darwin Streaming Server to stream an appropriately-created movie file from the server. Due to browser inconsistencies, this is a little more difficult than embedding a normal object. It is necessary to create an extra file:

The Quicktime Link file

This is a simple XML file that contains a pointer to the video stream:

<?xml version="1.0"?>
<?quicktime type="application/x-quicktime-media-link"?>
<embed src="rtsp://your_streaming_server.com/movie.mov" autoplay="true" />

The file can be saved with a .qtl extension, although it is often seen with an extension of .mov instead. It is a good idea to give the .qtl file the same name as the movie, so we will make it movie.qtl for this example.

The code to embed a streaming version of a Quicktime movie is the same as that used for an embedded movie; however, instead of linking to the movie itself, you link to the Quicktime Link XML file instead:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="320" height="260">
  <param name="src" value="movie.qtl" />
  <param name="autoplay" value="true" />
  <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
  <param name="controller" value="true" />
  <!--[if !IE]> <-->
    <object data="movie.qtl" width="320" height="260" type="video/quicktime">
      <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
      <param name="controller" value="true" />
    </object>
  <!--> <![endif]-->
</object>


Windows Media

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
        codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
        width="320" height="260" type="application/x-oleobject">
  <param name="filename" value="video.wmv" />
  <param name="autostart" value="true" />
  <param name="showcontrols" value="true" />
  <!--[if !IE]> <-->
    <object data="video.wmv" width="320" height="260" type="application/x-mplayer2">
      <param name="pluginurl" value="http://www.microsoft.com/Windows/MediaPlayer/" />
      <param name="controller" value="true" />
    </object>
  <!--> <![endif]-->
</object>

Note: The above code assumes the user has Windows Media Player running under Microsoft Windows. The version stated in the outer object refers to the earliest version of Media Player that will play the file.

Flash

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0"
        width="300" height="120">
  <param name="movie" value="flash.swf" /> 
  <param name="quality" value="high" />
  <param name="bgcolor" value="#FFFFFF" />
  <!--[if !IE]> <-->
    <object data="flash.swf" width="300" height="120" type="application/x-shockwave-flash">
      <param name="quality" value="high" />
      <param name="bgcolor" value="#FFFFFF" />
      <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
    </object>
  <!--> <![endif]-->
</object>

Note that the value of version relates to the earliest version of Flash that your .swf file will work with.

ActiveX Problems

Despite prior art to the contrary, the United States Patent Office has upheld a patent by a company called Eolas which claims to have created the first browser to support plugins. As a result, Microsoft have made an update to Internet Explorer 6.0 (for Windows XP Service Pack 2) that prevents ActiveX objects from automatically executing in an HTML page. In most cases, a message box is displayed to the user when an ActiveX object is called, and the object only executes once the user has clicked a control.

It means that most users of Internet Explorer will have to click a control before embedded media will play or execute. It is hoped that a compatibility patch will remedy this situation; however, it may be necessary to provide an alternative method of embedding media.

JavaScript Solution

By using JavaScript to write the HTML from the examples, the ActiveX problem is circumvented immediately. In HTML documents served as text/html, the code can simply be wrapped in a Document.Write() function and placed in a separate JavaScript file. A standard JavaScript script element can be used to call the function within the document; however, this solution will not work with XHTML being served as application/xhtml+xml or XML, because the Document.Write() function does not exist. Document Object Model (DOM) methods must be used instead.

It is worth pointing out that any JavaScript solution is considered poor from an accessibility standpoint, because users with JavaScript disabled (or not available) will not see any media content at all (including alternative content). Of this group of users, however, most will also have ActiveX itself disabled, and will not see any media content anyway.

See Also

Reference