How to Embed Quicktime Video Correctly in a Web Page

created January 9, 2012, last updated September 24, 2012.

.
closeThis post was last updated 5 years 10 months 14 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.

Embedded Quicktime Video Example
Embedded Quicktime Video Example

 

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!

Comments

  1. TK Vanacoro says:

    I cannot make this work. I have a .mov on a host and I am trying to embed it as your code suggests. I get the black square, but nothing else.

    Help would be appreciated.

    Thanks.

  2. Angela says:

    Thank you so much for posting this. I have been trying to get a video to work on my site for hours and nothing was working. I finally used an embed tag and thought things were all good until I downloaded the latest version of Quicktime and then the controller disappeared and the video resized to crazy dimensions. Using your tutorial I was able to get back on track, thanks again!!!

  3. dee Beigh says:

    This was a big help. Also, of possible interest to your readers, for *live* streaming content (via Darwin Streaming Server), these slight revisions seem to work well for us (so far):

    ...