Seattle designer Darlin Gray emailed friends and colleagues links to a short video welcoming them to her new website. What makes this tip-worthy is the simple HTML trick that automatically forwards web visitors to her main website after the video introduction is complete. See her example at:
Video Welcome Page: Darlin’s Place
Interested in trying this technique yourself? Apple provides a free set of scripts for integrating QuickTime movies into your website. Read on after the jump for a short tutorial on how to create this effect yourself.
Note: We’ve tried to provide a good basic tutorial, however this technique does require a medium-level knowledge of HTML and web publishing to accomplish. You’ll need to be comfortable uploading and finding files on your website, as well as making minor changes to HTML code.
Step 1: Upload Apple’s AC_QuickTime.js script to your site.
Apple provides a free JavaScript file you can upload to your website to streamline the process of embedding QuickTime movies. This script includes updates from late 2006 to provide better compatibility with Microsoft’s Internet Explorer browser for Windows. It’s free, it works great, and it makes your life easier.
Apple’s AC_QuickTime.js JavaScript file
Download this file, and upload it to a folder on your website. In this screenshot from Dreamweaver, you can see we’ve uploaded the AC_QuickTime.js file into a folder on our website named Scripts.
Step 2: Add a script link to the header of your HTML.
Once you’ve uploaded Apple’s script file, you’ll need to add a link to it in the header section of your HTML. If you uploaded that file into a “Scripts” directory on the first level of your site that link would look something like this:
<script src="https://yoursite.com/Scripts/AC_QuickTime.js"
language="JavaScript" type="text/javascript"></script>This should be a single line when added to your HTML. We’ve broken it into two lines above to make it more legible in this tutorial.
Note: If you are uncertain where to add this line of code, simply look for a line reading </head> near the top of your HTML, and add this code on a separate line above that. Here is another screenshot from our Dreamweaver example:
Step 3: Embed your QuickTime movie.
With that handled, you can get to the fun part of actually embedding your QuickTime movie on your web page. Add the following HTML code in the section of the page you want your movie:
<script language="JavaScript" type="text/javascript">
QT_WriteOBJECT_XHTML('https://yoursite.com/yourmovie.mov', '700', '410', '',
'autoplay', 'true',
'loop', 'false',
'qtnext1', 'https://yoursite.com/target.html',
</script>
The areas in Red should be replaced with the location of your QuickTime movie, the width and height of that movie, and most significantly for this tip, the URL of the page to forward your viewer to when the movie is done playing (that 'qtnext1' attribute is the key to this trick).
Tip: When setting the width and height of your movie, make sure to add 16 pixels to the height to provide room for the default QuickTime controls that sit below your movie.
Step 4: Additional attribute tags you can use (optional).
In the example code above we included a number of extra attribute tags that control certain ways the embedded QuickTime movie plays. Our example uses two attributes that tells the movie to play as soon as it is loaded, and not to loop. There are a number of additional details you can control by adding an extra line or two to your code:
'autoplay', 'true',AUTOPLAY tells the movie to start playing as soon as possible without waiting for your visitor to click anything.
'loop', 'false',Setting the LOOP attribute to FALSE makes sure the movie does not repeat at the end.
'showlogo', 'false',Setting the SHOWLOGO attribute to FALSE prevents the QuickTime “Q” logo from displaying while a movie is loading.
'href', 'https://yoursite.com/target.html',When you add the HREF attribute, this makes your movie a clickable link. When a visitor clicks on the movie, they are forwarded to your target URL.
'controller', 'false',The CONTROLLER attribute determines whether QuickTime controls are visible or not. Setting this to FALSE hides the controls.
'emb#bgcolor', 'black',The EMB#BGCOLOR attribute sets the background color of your movie box to any HTML color you like. Most designers chose BLACK by default.
'qtnext1', 'https://yoursite.com/target.html',Finally, QTNEXT1 is the key attribute for this tip. Adding a URL for this attribute will forward your visitor to that webpage when the movie comes to the end.
Additional Apple Resources:
Apple has several excellent resources dedicated to helping web developers included QuickTime media in their web pages.
Apple: Updating Website to Include QuickTime Content.
Apple: Including QuickTime In A Web Page.
Source: This tip inspired by the long-awaited, often-delayed, arrival of DarlinGray.com. This particular HTML trick comes courtesy of Don Mitchell at Imagination Creation, a Seattle-based web and interactive designer.
