From time to time, we are forced to invent our own techniques to support little tricks - like embedding video in blog pages, or adding social bookmarking to blogs. This is one of those tricks.

QTObject.php lets you embed a QuickTime video or audio object in your blog page. You can copy the following HTML code into your WordPress entry and it will play a QuickTime MOV file from wherever you have uploaded it. The code can be embedded and there's no overhead when the HTML page initially loads - the QT movie is only loaded and played if the icon is clicked.

The QT movie opens and plays in a separate layer in front of whatever might be on the screen behind it.

For ARCHIVE.ORG Flash objects, there's a version at FlowObject.php (just substitute "FlowObject.php" in place of "QTObject.php" in the examples below).

For Flash flv objects, there's a version http://web.red7.com/FlashObject.php?width=320&height=260&autoplay=true&url=url-of-flv-file

For YouTube video, there's a version http://web.red7.com/YouTubeObject.php?width=320&height=260&autoplay=true&object=<insert-object-Code-here>

For straight Flash <embed>, there's a version http://web.red7.com/EmbedFlashObject.php?width=320&height=260&autoplay=true&embed=<insert-embed-Code-here>

Here's the HTML code (with some notes):

• Use width 320 and height 260 for video MOVs, width 220 and height 28 for audio. Note that the player is inside a table of width 360 - you might have to make this wider in some cases.
• Use any unique number in place of "299" (in "AudioLayer299" and "audioframe299") to make the layer name unique on a page. (This is only important if you have more than one of these players on a single HTML page.)
• Substitute the URL for your MOV file in place of the Zizzle MOV in the example!
• You may specify "autoplay=true" or "autoplay=false" as parameters to QTObject.php, as well as the width and height of the desired object. The url= is the absolute URL of your QT movie. Note that operation of all of this requires that web.red7.com be operational - if you have a mission-critical application for this code, ask for the source of the PHP file so you can put it on your own server.
• The code class="snap_noshots" turns off Snap shot icons and previews so that the icons don't mess up the look of the table.

VIDEO

<!-- see http://web.red7.com/QTObject.html -->
<style type="text/css"> #MediaLayer299 {  position:relative;  width:320px;  height:260px;  z-index:1;  left: 0px;  top: 0px; background-color: white;  visibility: visible; text-align: left;  vertical-align: middle;  }  </style>
<table width="360" class="snap_noshots">
 <tr valign="top">
  <td valign="top" width="22">
   <a href="http://web.red7.com/QTObject.php?width=320&height=260&autoplay=true&url=http://blog.dlfound.org/sky/wp/wp-content/uploads/2007/06/Zizzle-ZoundZ.mov" onclick="show('MediaLayer299');" target="mediaframe299">
       <img src="http://web.red7.com/QTPod.jpg" title="Watch the QuickTime movie" alt="Watch the QuickTime movie" align="left" border="0" hspace="12" vspace="2" />
   </a>
  </td>
  <td align="left" valign="top" bgcolor="aaaaaa"><p id="MediaLayer299"><iframe src="http://web.red7.com/QTWatch.html" id="mediaframe299" scrolling="no" name="mediaframe299" marginheight="0" marginwidth="0" frameborder="0" height="260" width="320"></iframe></p></td>
 </tr>
</table>

Here's what it looks like in action:

AUDIO

<!-- see http://web.red7.com/QTObject.html -->
<style type="text/css"> #MediaLayer314 {  position:relative;  width:320px;  height:100px;  z-index:1;  left: 0px;  top: 0px; background-color: white;  visibility: visible; text-align: left;  vertical-align: middle;  }  </style>
<table width="360" class="snap_noshots">
 <tr valign="top">
  <td valign="top" width="22"><a href="http://web.red7.com/QTObject.php?width=220&height=28&autoplay=true&url=http://blog.dlfound.org/sky/wp/wp-content/uploads/2007/08/David-Goulding-cinematographer.mov" onclick="show('MediaLayer314');" target="mediaframe314">
   <img src="http://web.red7.com/QTPod.jpg" title="Listen using QuickTime player" alt="Listen using QuickTime player" align="left" border="0" hspace="12" vspace="2" />
</a>
  </td>
  <td align="left" valign="top">
   <p id="MediaLayer314" bgcolor="aaaaaa"><iframe src="http://web.red7.com/QTWatch.html" id="mediaframe314" name="mediaframe314" marginheight="0" marginwidth="0" frameborder="0" height="64" scrolling="no" width="320"></iframe></p>
  </td>
 </tr>
</table>