|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
O'Reilly Book Excerpts: Learning Web Design, 2nd Edition
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.
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
Figure 22-4. Use the
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
If you look carefully, you will see that the basic directions are
repeated in both the
Both tags contain code that prompts the browser to download the player necessary for displaying the movie on the page. In the
The values of these attributes (shown in bold) must appear exactly as they are written here or they will not work.
As for images, you must provide the source URL for the movie file in both tags. For the
You can decide whether you want the controller to display using the
controller parameter and attribute. Setting the value to
This is just the tip of the iceberg of controls for inline video
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.
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.
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 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.
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.
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.
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
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.