Adding Movies to Your Web Page

Author's note: Although I've been working on web sites since 1993, it's only been in the last year that I've started playing around with video on the Web on my own sites and on some of the sites I've designed. Now that standard web connections are faster than ever, video is more accessible than ever.

The following article is an excerpt from the second edition of my book, Learning Web Design, which is aimed at people who are brand new to web design and production. This excerpt is intended to be a starting point for understanding the basics of web video and is by no means the final word. See the excellent resources at the end of this article for further reading.

Video

How did they get a little movie to play right on their page?

When you see a video playing right on a web page, chances are it's a QuickTime movie that has been placed on the page with an <object> tag (the World Wide Web Consortium's [W3C] preferred method) along with an <embed> tag (Apple's recommended method for Netscape and older browsers) as shown in Figure 22-4). This method is discussed in detail in the next section. In order for the movie to display on the web page, the QuickTime plug-in must be installed on the user's browser. Fortunately, this plug-in is included in current browsers' installation packages. For Windows users, code in the <object> tag automatically installs the player necessary for viewing the movie.

Figure 22-4. Use the <embed> tag to place a movie and its player right on the page like an image. Note that I've added 16 pixels to the actual movie height (120 pixels) to accommodate the player controls.

As an alternative, you can provide a link to the movie file and let the user download it whenever they want (Figure 22-5). When the movie downloads, it can be viewed in the browser window with the QuickTime plug-in or it can be played with another movie-playing helper application.

TIP: When linking to an audio or video file, always provide the file size so users can make an informed decision about whether they want to commit to clicking the link.

Figure 22-5. You can also simply link to a movie file. When the user clicks the link, the movie opens in whatever movie player the browser has configured.

Using <object> and <embed>

To ensure that videos will play properly on all browsers, it is recommended that you place the movie on the page using both the <object> and <embed> tags. The standard, minimum code for doing this is as follows:

If you look carefully, you will see that the basic directions are repeated in both the <object> tag and its parameters and the <embed> tag. Let's take a look at the minimal movie settings.

Player information

Both tags contain code that prompts the browser to download the player necessary for displaying the movie on the page. In the <object> tag, the classid and codebase attributes provide specific directions for automatically installing the required ActiveX element.

In the <embed> tag, the pluginspage takes the user to a page where they can download the QuickTime player if it is not found by the browser.

The values of these attributes (shown in bold) must appear exactly as they are written here or they will not work.

Source

As for images, you must provide the source URL for the movie file in both tags. For the <object> tag, the url is provided within a parameter (<param name="src" value="moviefile.mov">). The <embed> tag uses the src attribute.

Dimensions

The width and height attributes are required in both tags. In order for the controller (the strip at the bottom with the slider and play and pause buttons), you must add 16 pixels to the height of the movie. In the previous example, the original movie is 240 x 180 pixels, so I've set the width to 240 and the height to 196.

Controller

You can decide whether you want the controller to display using the controller parameter and attribute. Setting the value to true makes it display; setting it to false hides it. Use the autoplay parameter and attribute to set whether the movie starts playing automatically when the page loads (true) or if the user needs to hit the Play button to start the movie (false).

This is just the tip of the iceberg of controls for inline video using the <object> and <embed> tags. For a complete list, see Apple's tutorial for embedding Quicktime movies at www.apple.com/quicktime/authoring/embed.html.

Movie files

Let's talk a little more about movie files. The QuickTime Movie format (.mov) is ideal for delivering movies over the Web because it is a highly condensed format supported on both PCs and Macs. Movies can also be saved in MPEG (.mpg or .mp2) format or as Windows-only AVI files (.avi).

Making movies is easier than ever with digital video cameras that can be plugged directly into your computer. You'll need to start with a video source (from your camera or videotape). You'll also need video-editing software, such as QuickTime (by Apple), Media Cleaner Pro (by Terran Interactive, http://www.terran.com/), Apple Final Cut Pro, or Adobe Premier if you want to go for professional-level editing (http://www.adobe.com/). If you work on a newer Macintosh, you can take advantage of Apple's iMovie technology, which puts basic movie-making abilities in the hands of consumers (see www.apple.com/imovie/ for more information).

Because video and audio information can be huge, the trick to making web-appropriate movies is optimization--the frame rate, the image compression, and the sound compression (see Optimizing Video for the Web below). All video-editing packages provide the tools you need for compressing your video as small as possible.

Streaming video

Like audio, a video source can be streamed so that it starts playing quickly and continues playing as the data is transferred. The options for video are the same as for audio: RealMedia (.rm), Windows Streaming Media (.wm), and streaming QuickTime. For true streaming performance, the files must be served from a computer outfitted with the appropriate server software. See the companies' web sites, listed earlier in the Streaming audio section, for current information on streaming formats.

Jennifer Robbins was one of the first designers for the Web. As the designer of O'Reilly's Global Network Navigator (GNN), the first commercial web site, she has been designing for the Web since 1993.

Comments on this article

1 to 11 of 11

W3C - Embed - WMV
2008-02-26 04:46:32 RicardoG [View]
tech talk
2007-01-15 05:33:01 pdmehta [View]
tech talk
2007-01-15 05:32:51 pdmehta [View]
Frames, Embedded QuickTime, Passing Variables (APOLOGIES)
2005-09-21 10:12:28 Vidiot2002 [View]
Frames, Embedded QuickTime, Passing Variables
2005-09-21 10:09:23 Vidiot2002 [View]
avi movies on web page.
2005-01-24 20:30:19 pedrotheconejo [View]

avi movies on web page.
2006-04-08 22:29:33 swlm82@aol.com [View]

avi movies on web page.
2005-01-24 20:26:40 pedrotheconejo [View]
avi or mpg to mov
2004-02-21 11:02:07 chenjin [View]

avi or mpg to mov
2004-07-11 07:16:12 falia [View]

More info about straeming audio server software
2003-11-11 10:10:58 anonymous2 [View]

More info about straeming audio server software
2003-12-02 18:01:34 anonymous2 [View]

i think i read something like this on http://www.codon4.com
2003-08-19 19:09:59 anonymous2 [View]
Please focus on mpg instead of mov
2003-07-19 06:28:42 cortlandt [View]

Please focus on mpg instead of mov
2003-07-21 15:13:14 Derrick Story | [View]

Please focus on mpg instead of mov
2003-09-28 21:09:46 anonymous2 [View]

Please focus on mpg instead of mov
2005-04-21 12:45:09 ritatiti [View]
Please focus on mpg instead of mov
2004-01-08 02:28:08 anonymous2 [View]

Please focus on mpg instead of mov
2005-06-08 20:35:23 Hojo [View]

1 to 11 of 11