embedding multimedia

Embedding Media in Web Pages

For a more cohesive user experience, you'll want to embed the video directly into the web page rather than linking to an external file. This method has a pre-requisite -- creating a "poster frame," which is a one-frame QuickTime movie (unfortunately, you can't use a standard, untreated JPEG image as your poster frame).

Creating a Poster Frame

Because we don't want the video to load automatically when the page loads, we need to tell the QuickTime plugin to display a static image first -- a "poster frame." Only when the poster frame is clicked by the user should the video be downloaded from the server and displayed in place of the static image.

So we have two tasks before us:

  • Creating a poster frame
  • Embedding the poster frame and linking it to embedded video.

In order to create a poster frame, you need to first grab an image, then turn that image into a one-frame QuickTime movie. Here's how:

  1. Double-click the finished movie file to launch it in QuickTime Pro. Note: You must register the QuickTime player to turn it into QuickTime Pro. The free version does not include the Export options we need to create a poster frame. All J-School computers have QuickTime Pro installed.
  2. Scrub to the frame you want to use and pull down File | Export.* For the type, choose "Export Movie to Picture." Save the picture to your desktop (not to your site's project folder).
  3. In QuickTime, pull down File | Open File... and navigate to the image you just exported. You should now be looking at a one-frame movie.
  4. Pull down File | Export again and select "Movie to QuickTime Movie." Export your one-frame movie to your project folder - the same folder where the movie file lives). Give it an intuitive filename. For example if your movie is called sadplanet.mov, call the still image sadplanet_still.mov.

These instructions assume that you want your poster frame to come from the movie itself. This, of course, is not a requirement. You can use any still image you like -- eg. one you create in Photoshop. If you use an image from another source, make sure it's saved at the same dimensions as your movie (e.g. 320x240) and skip steps 1 and 2 above.

* If you export your movie and notice the file is not showing up, you may have to click "settings" during the export process and make sure the "video" box is checked.

Embedding Video Into the Page

Now you need to embed your poster frame into the web page as an ActiveX object and link the object to the movie file. Here's how to do that from within Dreamweaver.