Clara Offers Her Paw (QuickTime Movie 200k)
The oldest technique for using media on the Web is to simply include a link to the file as seen below. This technique allows the client (the one visiting your Web page) to open the media file using whatever software he/she has installed for that purpose. That assumes, however, that the user understands how to configure his/her Web browser to use a given helper application to open the movie. In 2004, most browsers come with the Flash plugin pre-installed. Other popular plugins include the QuickTime plugin, the RealOne plugin, and the Windows Media Player plugin. Here are some simple links to media in different formats. Please note that I have included the file type and file size in the text of the link as a courtesy to the visitor. Each file will be opened by whatever application is designated for that file type on the visitor's browser.
If the media file is a movie or animation, it can be nice to use a single frame from the movie as the link. This way the visitor has some idea of the contents of the media.
Using a link opens the media file but does not give the Web designer control over how it will be displayed. When the visitor clicks one of the links above, in many browsers the entire window is filled with a QuickTime movie which forces the user to click the BACK button on the browser's toolbar to return to the original page.
An alternative is to use TARGET="_blank" as an attribute in the link to open the movie in a new window but this solution creates a window the same size as the original which obscures the original and forces the user to close the new window to return to the original page. Some users may not be aware of this and mistakenly think the original page is no longer available.
If you are certain that your visitors have high-bandwidth connections or you gave your users advance notice of the file size on a previous page, then you may embed a large media file in the page. The specific code for embedding content is different for each plugin. The example below uses the QuickTime plugin. It was saved using QuickTime's fast start feature so the movie will begin to play even before it is fully downloaded. The fast start feature is a kind of pseudo-streaming that works without the need for a special streaming server.
A better solution is to create a small button with a bit of JavaScript code to open a page with an embedded media file in a new window with characteristics specified by the designer. View the code of this page to see how it works.
A nice feature of the QuickTime plugin allows the designer to embed a small section of a movie (usually one frame), called a poster movie, and link it to the original, larger movie. The target and href attributes in the embed tag are set to load the new movie in the same space on the screen as the poster movie. View the code of this page and note how the controller is set to false on the initial poster movie. The autoplay attribute has been removed from the code because it is irrelevant for a still image. Also note that the HREF URL is relative to the location of the movie not the location of the page. Since the poster frame is displayed without a controller, it is necessary to specify a white background color to mask the extra 20 pixels allocated in the code for the controller needed for the full movie. Note also how the original frame has been altered in an image editing program (AppleWorks) to inform the user how to download the entire movie and how big of a download it will be. The audio example uses a small QuickTime movie called audiostub.mov that contains a still image of a playback controller.
| Video Example | Audio Example |
A complete tutorial on creating poster movies is available here at the MakePages.com site.
UPDATE 2006: Apple Computer now recommends using JavaScript to embed all QuickTime content. This addresses a recent change in the way Internet Explorer on Windows now handles ActiveX controls. Using JavaScript ensures that visitors to your site have a trouble-free experience using QuickTime content. Dr. Estrella has developed a small Flash application to help you generate the appropriate code to embed a QuickTime movie. You can access it here. To use this generator you will also need the QuickTime External JavaScript file - right-click (Control-click on Mac) to download. Place it in whatever folder you use to store your external javascript files (ex. ../javascript/AC_QuickTime.js);