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.

Optimizing Video for the Web

Most video editing tools offer automatic web video
settings targeted at various Internet connection speeds. You may also
want to experiment with these settings individually to find the quality
that best suits your video.

Frame size

Common frame sizes for web video are 160 x 120 and 240 x 180. Some developers go as low as
120 x 90. It is not recommended that you use a frame size larger than 320 x 240 with current
technology.

Frame rate

Frame rate is the measure of number of frames per second (fps).
Standard video is 30 fps. For the Web, a frame rate of 15 or 10 fps is
more appropriate.

Color bit depth

Reducing the number of colors from 24-bit to 8-bit will drastically
reduce the size of your video, but will also sacrifice quality.

Data rate

This is the rate at which data must be transferred in order for the
video to play back smoothly. Data rate is measured in kilobytes per
second (Kbps). This is one of the most important settings for web
video, particularly for streaming video, and it should be tailored to
the targeted Internet connection speed. For 56 KB connections, aim for
a data rate of 4 Kbps; 30 Kbps for DSL; and 50 Kbps for cable
connections.

Compression scheme

Videos are compressed using compression and decompression
algorithms (called codecs). There are many
codecs available, but the best choices for web video are H.263 and the
Sorenson Video codec, which can achieve very high image quality at
lower data rates. Sorenson requires a high-performance processor for
playback, so it may not work well on older computers. Sorenson 3 video
is a later version which requires the latest hardware and software
configurations for playback. As an alternative, the Cinepak codec is a
good general-purpose codec that compresses reasonably well and is
supported by older computer configurations.

Quality

You can set the overall quality of video to low, medium, or high.
Medium is fine for most purposes.

Where to Learn More: Web Video

QuickTime for the Web: For Windows and Macintosh, Third
Edition
by Steven Gulie (Morgan Kaufmann, 2003)
A complete guide to creating QuickTime content and putting it on the Web.

iMovie 2: The Missing Manual
by David Pogue (O'Reilly, 2001)
A step-by-step guide to the movie-production process using Apple's iMovie software.