Case Study - How to Embed the Windows Media Player Within the Items and Play a Movie

The Goal

A customer contacted us and asked how she could embed a Windows Media file into 20/20 DataShed's pages. Here are the details:

• This customer operates a marketing firm which specializes in the advertising and promotion of real estate listings for her local brokers and agents.
• This customer's business began offline and a mainstay of her marketing strategy has always been a "TV Showcase". (You know the real estate listings that your cable provider broadcasts on the channel guide?! Perhaps you've seen it? These advertisements often appear while you're watching the channel guide cycle through the endless list of sitcoms and cop-shows; there are advertisements in the top-corner of the screen and it's usually accompanied by elevator music or Zamphir.)
• Her business has now expanded to include online services and she wanted to incorporate her video library with the online inventory.

The Process

20/20 DataShed already provides an "upload" utility which enables you to upload photos or documents (such as videos). So that part is easy -- this customer can upload a movie file for each of her listings.

20/20 DataShed already provides a method to display links to download the documents that are associated with listings. So that part was also easy -- visitors would be able to click and view the movie files.

The only part that wasn't already available was a method to actually play the movie file in an "embedded" media player like below. (This customer wanted the Windows Media Player to appear directly in the web page rather than pop open in a new application.)

We determined that this was possible using 20/20 DataShed's tools and would not require any modification to the product's source code. With a simple edit to the "item_template(Default).html" file (which is a basic HTML document), we could accomplish this customer's request.

The Solution

We knew these things before attempting this project:

• Every movie file will be ".WMA" or ".WMV" format -- and therefore always compatible with the Windows Media Player.
• Every item in her 20/20 DataShed inventory will have at least one movie.
• She wanted the movie file to appear on the page with the items where the "MultiPhotoModule" usually appears.

First, we uploaded a sample movie file (here) to one of her listings.

Next, we modified the "item_template(Default).html" file like this:

• In the default copy of "item_template(Default).html" you'll see the following line:

  [MultiPhotoModule::img.width{300}:img.aspectratio{3/4}:value]

  That token produces the "MultiPhotoModule". However, this customer explained that she'd prefer the movie appear in that location on the page instead. So...
• We removed that token and replaced with a carefully constructed [DocumentModule:] token, like this:

  [DocumentModule::index{1}:separator{}<object id="MediaPlayer" width="320" height="286" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><param name="filename" value=":URL" /><param name="Showcontrols" value="true" /><param name="autoStart" value="true" /><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" showstatusbar="true" enablecontextmenu="false" autostart="true" loop="false" width="320" height="286" src=":URL"></embed></object>]

  The important aspects of this token is the careful use of the ":index{}" attribute and the ":URL" property. In effect, this token peforms the following logic:
  1. The token retrieves the first document that was uploaded to the item: "index{1}". The customer promised that she would always ensure that her movie file is first in the list of documents (this is very important). If she forgets this cardinal rule, then 20/20 DataShed might try to embed some other type of document in the Media Player and it likely won't work!
  2. Then the token stores the URL of that document: ":URL"
  3. Then that URL is written to the page within well-formed <object> and <embed> tags.

  Note: The "index{}" attribute and ":URL" property are supported in the [DocumentModule:] token since 20/20 DataShed version 1.0.22.

  Also note that the token will exit if there are no documents available for the item and nothing will be written to the page.

• We decided also that it would be helpful to give visitors the option to download the movie file normally, so we used the default [DocumentModule:] token as below:

  [DocumentModule:<h6 style="margin-top:12px;">:label</h6>:value:separator{<br />}]

  This token will produce hyperlinks for the entire list of available documents. The result is similar to this:

  Downloads

  Hello World (Movie)
  Software!

Send Feedback