Simple QuickTime Movie Embedding

QuickTime has a very useful "Export for Web" feature that can produce a number of different versions of the same movie targeted at different devices. As well as the different versions of the exported movie it produces a web page with instructions and an example of how to embed the movie in your own website. This is a great but, as far as I am concerned, the way Apple have chosen to embed QuickTime movies in web pages has a number of drawbacks:

The solution presented here attempts to address all of these issues making it both easier to embed QuickTime movies into pages within your website as well as giving you more control over their appearance.

Instructions

For The Impatient

<script src="quicktime.js" language="JavaScript" type="text/javascript"></script>
<link href="quicktime.css" rel="stylesheet" type="text/css">

By default if QuickTime is not installed on the users machine then they will simply be prompted to download the movie. If instead you wish them to be re-directed to a different URL then add the following (modified to point to your upgrade page) to the <head> section:

<script type="text/javascript">
	QuickTime.upgrade = "upgrade.html";
</script>

If QuickTime isn't installed then you can also cause the script to call a function with the link object as it's argument. I use this to switch to on the fly conversion to Flash video for those users who don't have QuickTime. To use a function instead of a redirect URL do something along the lines of the following in the <head> section:

<script type="text/javascript">
	QuickTime.upgrade = function(link)
	{
		//do something in here with the link object
	}
</script>

Use this code (modified with the correct dimensions and URLs for the poster image and movie) in the <body> of your web page:

<div class="quicktime" style="background-image: url(poster.jpg); width: 640px; height: 272px;">
	<a href="movie.mov" class="standard button">Click To Play</a>
</div>

If QuickTime isn't installed you can also replace the links with a more suitable message. Instead of setting the upgrade parameter insert the alternative content within a DIV with the class alt-content inside the main player DIV (the associated CSS file ensures that this content is not usually displayed). For example:

<div class="quicktime" style="background-image: url(poster.jpg); width: 640px; height: 272px;">
	<a href="movie.mov" class="standard button">Click To Play</a>
	<div class="alt-content">
		<a href="movie.mov" class="standard button">Click To Download</a>
	</div>
</div>

Or if you prefer to place the links to the movies outside of the DIV in which they will be played then use this code (again adjusted to suit your movie) in the <body> of your web page

<div class="quicktime" id="qtPlayer" style="background-image: url(poster.jpg); width: 640px; height: 272px;"></div>

<a href="movie.mov" class="playin-qtPlayer">Click To Play</a>

Full Details For Those Who Are Interested

To embed a QuickTime movie in a web page using this techniques is simple. Add a DIV to the page which has the CSS class 'quicktime'. Make sure the DIV covers the area in which you want the movie to appear, and use the CSS background-url property to provide a place holder image. There are then two ways to activate a movie, which I refer to as the inside and outside approaches.

No matter which method you choose the JavaScript code that runs when the page is loaded augments the link so that when clicked rather than loading the movie as a new page it is embed in the page completely filling the DIV.

If JavaScript is disabled then the loaded page will initially look identical. When a user clicks on a link that would have swapped in the player, instead of modifying the page to show the movie, the browser will navigate to the URL of the movie and play it in isolation. This is preferable to having to provide object and embed tags for each movie, as a) the look of the page is the same with or without JavaScript and b) the page will load quicker as it does not have to load QuickTime unless the user wishes to view one of the movies.

Examples

Basic Version

This version emulates the look and feel of the version provided by Apple when you use the "Export for Web" option in QuickTime.

Customised Version

The link that is clicked to play the movie doesn't have to be simple text. Here we have used an image to emulate the look of the streaming service provided by the BBC iPlayer.

Complex Version With Multiple Links

There is nothing that limits you to only a single link or single movie within the same container DIV. Here we have the option of playing the trailer for either Fracture or WALL·E inside a single container DIV.

Or you can also click on a link outside the DIV to play the trailers for Fracture and WALL-E

Alternative Content When QuickTime Is Not Installed

As previously mentioned the script can redirect to a URL or call a JavaScript function if QuickTime is not installed. Whilst this may often be enough it may be more useful to show alternative content within the DIV. If QuickTime is not installed and the upgrade parameter has not been set then the script will look for a DIV within the player which has the class alt-content and will then replace the existing content with contents of this DIV.

One use of this would be to change the link text from "Click To Play" to "Click to Download", although any alternative content could be used. In the following example, if QuickTime is not installed then a message telling the user that "The Movies On This Site Require QuickTime" is displayed. This example also uses a new DIV, of identical size to the player to replace the background image with the stage curtains, from the previous example, to hide the Wall-E poster image.

Other Features

The script will also attempt to make sure that the video is visible by scrolling the window when a video is played. For example, you can play the WALL-E trailer in the first player on this page, which if you are reading this shouldn't be visible.

Known Issues

If you find a bug or want to make a suggestion or request a new feature then please leave me a comment on my blog.