WEBADO Webhosting

We'll Help You Get Your Own Place on the Web

Webhosting and Design in Canada - Webado
Webhosting and design in Canada - WEBADO, Web-Ah-Do, Web-I-Do see www.webado.com

EMBEDDING A QUICKTIME PLAYER
For mov, qtl and mp4 Files

See also:

Back to EMBEDDING MEDIA ON A WEB PAGE ...

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 sample-video.mov, 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"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  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" 
		 data="sample-video.qtl" 
		 width="320" height="260"> 
		  <param name="autoplay" value="true" /> 
		  <param name="controller" value="true" />
		  </object> 
	<!--<![endif]--> 
</object> 
												

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";
	   var autoplay = 1; // to show the player it needs to be 1
	   var autostart = 1; // to actually start playing
	   myQTPlayer(myid,myfile,width,height,autoplay,autostart);
	   // -->
  </script> 
	<noscript> 
	  <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> 
	</noscript> 
</div> 
																																												

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.

Back to EMBEDDING MEDIA ON A WEB PAGE ...

 

Top

Is my on-line support useful?

If you'd like to make a donation to let me continue to offer online help, I will gratefully accept it.

 
0.00  seconds run time

Modified on: 2014-02-07