Knight Digital Media Center Multimedia Training

Embedding Multimedia

By Scot Hacker

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/elements/

Introduction

This is where your skills come together - Web page creation skills, interview skills, audio and video editing skills, and storytelling skills all converge at this point. Inserting media into Web pages is a bit more difficult than creating plain old HTML with graphics, but if you've mastered the other tutorials in this site, you'll do fine.

Before you can begin inserting audio and video into Web pages, you must first have some audio and video content to work with. This tutorial assumes that have already edited your audio or video in ProTools, iMovie, Final Cut, or other media application, and that you've alrady exported your audio or video as web-ready compressed QuickTime files.

Finally, you'll need to decide how the media should "appear" to the user of your web site. Should your audio or video start playing as soon as the page is loaded, with no start/stop controls? Should a separate window launch with the playback controls inside? Should you launch the Real or QuickTime player application itself? For the sake of this exercise, we'll first create a link that launches a separate player, then we'll get a bit fancier and embed a QuickTime controller directly into the web page.

Linking to Quicktime Media

It's now time to decide whether you want to want to simply link to your audio or video file (easy) or embed it in the web page (somewhat harder).

We'll now assume that you've exported your edited audio or video with the compression settings discussed, given it an appropriate filename, and placed it in a folder with your HTML document.

Note: When working on the Macintosh and creating files for use on other platforms or on the Internet, always remember to append an appropriate three- or four-letter extension on your filename(s). In other words, be sure to call a QuickTime file "abc.mov" or "abc.qtl" rather than simply "abc." If you leave off the extension, the web server won't know what type of file it is and thus won't know how to serve it properly.

There are two different ways of linking to a QuickTime movie, resulting in two different methods of viewing for the user. If you name your movie file "abc.mov" and link to it in the standard way, the movie will play in a new browser window when the user clicks the link.

Video Example:

Watch an excerpt from Angel Gonzalez' Visit To Buenos Airies in a browser window.

Audio-only example:

Listen to Babatunde Olatunji's drums.

With this method, the movie uses the QuickTime browser plugin. The user cannot resize the movie, and if the user clicks the Back button in the browser, they'll lose the playback window.

The other option is to have your movie launched in the external QuickTime player from a link on your web page (as opposed to using the browser plugin). Doing this is simple -- just rename "abc.mov" to "abc.qtl" (and link to the .qtl file rather than to the .mov).

Video example:

Watch an excerpt from Angel Gonzalez' Visit To Buenos Airies in the QuickTime player.

Audio-only example:

Listen to Babatunde Olatunji's drums.

The advantage of this technique is that, because the player is not embedded in the browser window, the user can resize the movie however s/he likes, or even run the movie full-screen. In addition, the user can now click the Back and Forward buttons in their browser without losing connection to the movie.

If the .qtl technique does not work on your web server (you'll know if you see raw data in the browser rather than seeing the movie come up in QuickTime Player), you may need to ask your ISP or sysadmin to add the following MIME type to the server's configuration:


application/x-quicktimeplayer .qtl

If your provider is unwilling to do this, you can probably add the handler to an .htaccess file in your web server document root:

AddType application/x-quicktimeplayer .qtl

Regardless whether you use the .mov or .qtl techniqe, it is as easy to create a link from a graphic to the external movie file as it is to link from text. Click on the image below for an example of how a JPEG image can link to a movie played in the external QuickTime player.

buenos

Click image to see video.

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:

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.

Streaming Audio and Video

Pseudo-streaming

The instructions on the previous pages pertain to pseudo-streaming. The audio or video files are placed on a standard web server and linked to with fairly standard methods. When the user goes to play the media, the web browser or playback application does not need to download the whole media file before playback begins. Instead, it downloads just enough to create a buffer (think of "headroom") and begins playback. This method works out well for shorter audio and video files, and simplifies technology needs greatly. Just link and go.

Genuine streaming

There is one big drawback to pseudo-streaming: Because the file is being downloaded and played back in real time, the user cannot skip ahead to a point, say, 14 minutes into the presentation. To allow this, an actual streaming media server must be set up alongside the normal http/web server - a task far beyond the scope of this tutorial. Here at the J-School we use Apple's free QuickTime Streaming Server.

If you do have longer audio / video files to present and have access to a genuine streaming server, note that you'll generally have to take an extra step when preparing your media. For QuickTime Streaming, you must add what's called a "hint track" which is a small track embedded alongside the audio and video tracks. The hint tracks tell the server how to "package" media data for the network. Without a hint track, QuickTime files will not stream from the streaming server.

To add a hint track when exporting from iMovie or Final Cut Pro, look for the checkbox "Hint for Streaming Server" in the export panel.

If you have an existing movie you want to add a hint track to, open it in QuickTime Pro and re-export it, this time adding a hint track. Doing so will not recompress your video, i.e. quality will not be degraded.

This is the end of the Multimedia Elements tutorial.

Related Links

MPEG Streamclip: A free video converter program for Mac and Windows.

About this Tutorial

This tutorial was written by Scot Hacker.