We Design & Host Your Place on the Web
WARNING: Obsolete technology kept for historical reasons.

For mov, qtl and mp4 Files

See also:


Here I will show 2 solutions, both good, both valid.

The Solution Based on the Satay Method

Here is the original code snippet that works in all browsers, courtesy of this article in A List Apart.

As an example I will use a Quicktime Player qtl meta file rather than usign the mov file directly. It just seems to work better. The media file to be played through Quicktime can be any other which Quicktime plays natively such as mp4.

In this example the video, addressed in the meta file sample-video.qtl, has a frame size of 320 x 240 pixels. The width defined for the object is the same, but the height will be the height of the frame plus about 20 pixels for the additional controls shown.

NB: This code is for a document with an XHTML doctype. For an HTML doctype or no doctype at all, ALL tags that are closed with a /> MUST be closed with only a >.

  <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  width="320" height="260">
  <param name="src" value="sample-video.qtl" />
  <param name="controller" value="true" /> 
  <param name="autoplay" value="true" />
  <!--[if !IE]>--> 
  	<object type="video/quicktime" 
		 width="320" height="260"> 
		  <param name="autoplay" value="true" /> 
		  <param name="controller" value="true" />

Also note the style applied to the object itself. The background color is needed for Firefox to not show a blank area while it loads the image. It's a matter of choice whether you use that or not, since thre may be cases where you want to not show a black square anyway until such time as the image gest loaded.

Here is an actual example for a short mov clip taken with a digital photo camera, which is being played through a qtl meta file in Quicktime. Click the play button in the player to play.

In the above example the assumption is that the necessary QT plugin is installed in the browser. That in itself is a challenge in all browsers, even in IE, but that is a different problem.

An .mp4 can be embedded in the same manner, but without making a .qtl meta file. The mp4 can also be embedded using the code for Windows media player but it may require an mp4 codec to be installed on the visitor's computer.

Another solution is QTObject, an adaptation of the SWFObject script for embeded Flash and WMPObject for Windows Media Player, to work with the Quicktime Player this time, developed by Geoff Stearns of DECONCEPT.

The QTObject Solution

This solution is very easy to use. It requires javascript for the Quicktime Player to be viewed, which is a reasonable requirement. In the absence of javascript, alternate content is served, which is highly recommended in any case.

Two scripts are to be included in the head section of the web page: qtobject.js and myQTPlayer.js. Both are available for download as a zip file here.

In the body of the page, in the place where you want the video file to be displayed, open a <div id="my_video_id">.

Insert a script which provide the informaiton for the qtobejct script which plays the vide, plus a <noscript> ...</noscript> section to provide the alternate content to be shown if javascript is not enabled.

<div id="my_video_id"> 
<script type="text/javascript">
// create the qtobject and write it to the page, 
// this includes plugin detection
// be sure to add 15-20px to the height to allow for 
// the controls
var width=320;
var height=260;
var myfile = "sample-video.qtl";
var myid = "my_video_id";
// to show the player it needs to be 1
var autoplay = 1; 
// to actually start playing
var autostart = 1; 
// -->
<p>You don't have javascript enabled
or your browser
is missing the QUICKTME plugin.<br /> 
<br /> 
<a href="sample-video.qtl" rel="nofollow">
Play media separately in QUICKTIME</a></p> 

Here is an example using qtobject, which has been coded exactly this way.

NB: These scripts are a work in progress. Please revisit this site in order to find the latest versions. Also please let me know of any limitations or bugs you may have found, whether concerning differnt operating systems or browsers than what I have been able to test myself.



WARNING: Obsolete technology kept for historical reasons.