This post was last updated 12 years 2 months 15 days ago, some of the information contained here may no longer be actual and any referenced software versions may have been updated!

As a HUGE David Bowie fan, I like to celebrate his birthday (he was 65 yesterday) with lots of Bowie videos and music. I like to share the videos with friends using Apples Darwin streaming server to create a live streaming playlist..Each year I do this I forget how to correctly embed the Quicktime video in html. So after searching around a lot for the best multi browser compatible way to do this here is the correct way to embed Quicktime video into your web site.

My example will embed the video using Apples recommended multi browser html and javascript code,  reference movie file and a poster image.

First, the reference movie file. If you use Quicktime Pro you can get the software to generate a reference file when you encode your movies for the web. The reference file has a .mov file extension but is not a media file instead it passes information to Quicktime to help it determine the best media to play for the client, i.e. low bandwidth version, iPhone version etc. In my case I am streaming all my media through a Darwin Streaming Server using RTSP and will create a reference file that points to the videos on my Darwin server.

The media reference file is accessed from Quicktime via HTTP so needs to be saved on in a publicly accessible area of your site.

In my example I am going to embed Bowies Lets Dance video. The video is saved in my Darwin media folder /home/media/video and is called davidbowie-lets-dance.mp4.

In my website folder I create a reference file called davidbowie-lets-dance.mov and paste the following text into it.

RTSPtextRTSP://medazzaland.co.uk:554/video/davidbowie-lets-dance.mp4

We need a “poster” image to represent the video, this will be shown on the embed page before the video plays, so we simply take a frame from the video and save it in a publicly accessible folder, in this example its called davidbowie-lets-dance.png

Now the HTML code to embed the video. In the head section we need to include Apples javascript and some styling that is used for the Click Here link on the embedded video.

<script src="http://www.apple.com/library/quicktime/scripts/ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
<script src="http://www.apple.com/library/quicktime/scripts/qtp_library.js" language="JavaScript" type="text/javascript"></script>
<link href="http://www.apple.com/library/quicktime/stylesheets/qtp_library.css" rel="StyleSheet" type="text/css" />

And now for the embed code which should go between the body tags of your html

	<div id="quicktimevideo">
		<script type="text/javascript"><!--
		QT_WritePoster_XHTML('Click to Play - David Bowie - Lets Dance', 'images/davidbowie-lets-dance.png',
			'http://my.medazzaland.co.uk/reference/davidbowie-lets-dance.mov',
			'720', '576', '',
			'controller', 'true',
			'autoplay', 'true',
			'bgcolor', 'black',
			'scale', 'aspect');
	//-->
	</script>
	<noscript>
	<object width="720" height="576" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
		<param name="src" value="images/davidbowie-lets-dance.png" />
		<param name="href" value="http://my.medazzaland.co.uk/reference/davidbowie-lets-dance.mov" />
		<param name="target" value="myself" />
		<param name="controller" value="false" />
		<param name="autoplay" value="false" />
		<param name="scale" value="aspect" />
		<embed width="720" height="576" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"
			src="images/davidbowie-lets-dance.png"
			href="http://my.medazzaland.co.uk/reference/davidbowie-lets-dance.mov"
			target="myself"
			controller="false"
			autoplay="false"
			scale="aspect">
		</embed>
	</object>
	</noscript>

	</div>

This code should work across all browsers and will embed the video using the poster image as a link as show below.

Notice that the embed code points to the reference .mov file with an http link, the reference file then redirects Quicktime to the correct RTSP link for the video.

If you want to serve up a lot of videos in this way, you can create the reference file on the fly with PHP as I have done with this example – click the photo above to goto a demo page. The video information, name, title, size etc. are all stored in a database, the PHP script pulls out the video info from the database and creates the reference files and html on the fly.

As a side note, I was unable to compile Darwin from source under the latest version of Ubuntu Server 11.10, I had to use previously compiled files from another Ubuntu server running Ubuntu 8.x for the install.

I am still looking at perfecting the MP4 encoding for Darwin streaming, so more on that another time and Happy Birthday David Bowie!