Embedding Multimedia

By Scot Hacker
Published May 16, 2007 in Web Development, Flash

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.

Click image to begin playback (excerpt from Angel Gonzalez' Visit To Buenos Airies).

  1. Click in the section of your Dreamweaver document where you want the video to appear.
  2. Pull down Insert | Media | ActiveX. A small placeholder widget will appear in your document.
  3. In the widget's Properties panel, specify a width of 320 and a height of 256. Be sure the width is equal to the actual width of your movie, while the height is 16 pixels higher than the height of your movie -- the 16px is the height of the QuickTime playback controller.
  4. Select the checkbox labeled "Embed"
  5. Type the name of your poster frame file into the "Src" field (or click on the folder icon and navigate to the file).
  6. Click the Parameters button. Click in the Parameter column and type "href." Click in the Value column and type the name of your movie file. Click the "+" sign to add another parameter called "autoplay" and give it a value of "true." Click "+" one more time and add a parameter called "target" with a value of "myself." You should be looking at a Properties panel and Parameters panel that look something like the image below.
  7. Click OK to set the parameters.

Video embed parameters options

Note that neither the movie nor the poster frame file will display in DreamWeaver. Save your document and open it in a web browser to check your work. If all has gone as planned, you should see your poster frame as the document loads. Clicking the poster frame should cause the video to load in its place. It's a good idea to put a text cue under the poster frame, saying something like "Click image to begin playback."

You will likely notice one remaining issue: You've embedded a one-frame movie, but the user needs to click on the image portion of it to begin playback. And yet there's a playback controller staring the user in the face. Most users will be tempted to click that controller, but will end up viewing only your one-frame poster movie if they do so. To make this problem go away, add one more parameter to the list above:

controller = false

You'll still get a controller on the destination video, but the "confusing" controller on the one-frame video will go away.

Embedding Audio Only

Embedding audio without video is, predictably, a bit simpler.

  1. Click in the section of your Dreamweaver document where you want the audio controller to appear.
  2. Pull down Insert | Media | ActiveX. A small placeholder widget will appear in your document.
  3. In the widget's Properties panel, specify a width of 200 and a height of 16. The QuickTime playback controller is designed to be displayed at 16px high -- the 200 dimension can be anything you like, but we find that 200 works well for this purpose.
  4. Select the checkbox labeled "Embed"
  5. Type the name of your audio file into the "Src" field (or click on the folder icon and navigate to the file).
  6. If you don't want your audio to play automatically when the page is loaded, click the Parameters button. Click in the Parameter column and type "autoplay". Click in the Value column and type "false". You should be looking at a Parameters panel that looks something like the image below. Click OK to set the parameter.

Comments

1) Anne Schermerhorn, April 20, 2009 at 3:08 p.m. [Link]

can MPEG streamclip be mentioned as a freeware program that is great for converting files, and trimming movies down to a 1frame.mov to use as a poster frame? Its a great program.

Add your comment

Login to post a comment.