Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






O'Reilly Book Excerpts: Learning Web Design, 2nd Edition

Adding Movies to Your Web Page

Related Reading

Learning Web Design
A Beginner's Guide to HTML, Graphics, and Beyond
By Jennifer Robbins

by Jennifer Robbins

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:

<object width="240" height="196" 
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
  codebase="http://www.apple.com/qtactivex/qtplugin.cab">
  <param name="src" value="moviefile.mov">
  <param name="controller" value="true">
  <param name="autoplay" value="false">
  <embed src="moviefile.mov" width="240" height="196"  
    autoplay="false" controller="true" 
    pluginspage="http://www.apple.com/quicktime/download/">
  </embed>
</object>

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.

  • Streaming Media Bible
    by Steve Mack (John Wiley & Sons, 2002)
    A comprehensive guide to putting streaming multimedia on the Web.

  • e-Video: Producing Internet Video as Broadband Technologies Converge (with CD-ROM)
    by H. Peter Alesso (Addison Wesley, 2000)
    This book focuses on high-speed Internet.

  • Inside Windows Media: Learning to Combine Video, Audio, and Still Images to Create Streaming Media
    by Microsoft Windows Media Team (Que, 1999)
    The definitive guide to creating Windows Media content.

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.


Return to the Web DevCenter.