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.
Use this code in the
<head> section of your web page:
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
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
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>
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.
DIVadd a link to the QuickTime (.mov) file you wish to embed.
idattribute to the
DIV-- this must be unique within the page. Outside the
DIVadd a link to the QuickTime (.mov) file you wish to embed and add a CSS class to the link
idshould be replaced with the
DIV(if that sounds confusing see the example above).
This version emulates the look and feel of the version provided by Apple when you use the "Export for Web" option in QuickTime.
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.
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
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
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
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.
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.
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.