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 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 http://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 http://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 Niederst is the author of two bestselling O’Reilly books: Learning Web Design, 2nd Edition and Web Design in a Nutshell, 2nd Edition.
First appeared at the O’Reilly Network.
In Learning Web Design: A Beginners Guide…, author Jennifer Niederst shares the knowledge she’s gained from years of web design experience, both as a designer and a teacher. This book starts from the beginning– defining the Internet, the Web, browsers, and URLs — so you don’t need to have any previous knowledge about how the Web works. After reading this book, you’ll have a solid foundation in HTML, graphics, and design principles that you can immediately put to use in creating effective web pages.
