by John Jung
Almost anyone can add animated GIFs to their Web pages. But to add a lot of sizzle to your Web page, you shouldn't settle for second best. You should go for the gusto and use video sequences in your Web pages.
There are numerous video file formats from which you can choose. This chapter covers the major differences among file formats, as well as the advantages and disadvantages of each format. This chapter also covers creating your own video files.
Creating animated GIFs is an easy process. Just draw some frames and string them together with a special program. In theory, video sequences are not much different. In practice, however, they are very different. The biggest difference between an animated GIF and a video clip is the origin of the material used for each. In animated GIFs, the source material is usually hand-drawn images. In video clips, the source material is primarily images from video tapes, TV, and movies.
The fact that video is the source material for video clips explains why they are not used as much as GIFs. Anyone can draw the frames required for animated GIFs by using a simple paint program and then use another program to string the frames together. However, to create video clips, you either need fairly expensive hardware or a lot of time-or both. Since most people want their presence on the Internet known as soon as possible, they don't bother taking the time to create video clips. This chapter will demonstrate that it really isn't difficult to use video clips in your Web page.
The most important aspect of video formats is deciding which file
format to use. Depending on the format you select, it is possible
that you will block out potential users of your site. Another
important consideration is that some video file formats are more
efficient than others at storing video segments. Consequently,
the more efficient formats create much smaller file sizes than
inefficient formats. Most hardware approaches to video clip creation
attempt to design files that conform to some or all of the file
formats. Table 26.1 displays the primary video formats, how well
each compresses video segments, and which browsers support each
format.
| File Format | Extension | File Size | Navigator Support? | Internet Explorer Support? |
| QuickTime | .Qt,
.Mov | Medium | Yes, in Navigator 3.0 | Yes, through plug-in |
| MPEG | .Mpeg, .Mpe, .Mpg | Small | Yes, through plug-in | Yes, through plug-in |
| Indeo | .Avi | Large | Yes, in Navigator 3.0 | Yes, in Internet Explorer 3.0 |
MPEG MPEG (Moving Picture Expert Group) is a group of people who are trying to create a standard for digital video. Much of MPEG's work takes it outside the reach of the Internet; however, the group did create the MPEG-1 standard. This standard is, by far, the most efficient way to store video clips. MPEG files are usually 3-10% smaller than files in other formats.
The MPEG standard requires the existence of three different animation frame types. The Intra frame (I-frame) is the most straightforward of all three; it is simply a still image. The Predicated frame (P-frame) stores the differences between itself and the last I-frame or P-frame. The final, and most confusing, animation frame is the Bidirectional frame (B-frame). The B-frame searches out the nearest I-frame and the nearest P-frame and stores the difference between them. The I-frame and P-frame that the B-frame is built upon must include one frame sequenced before the B-frame and one sequenced after.
This means it is entirely possible for frames in MPEG to appear "out of order" sequentially but still be correct. That is, some MPEG files are stored using the frame sequence IBBPBBPBBPBBIBBP, and so on. Therefore, when you first play an MPEG file from the beginning, the player shows the frames out of order. For example, it will show a frame sequence such as this: 0, -2, -1, 3, 1, 2, 6, 4, 5, 9, 7, 8, 12, 10, 11, 15, 13, 14, and so on.
To further complicate the matter, MPEG also makes extensive use of the capabilities of the human eye. Depending on the colors used in a particular frame, the MPEG standard determines whether certain colors can be seen by the human eye. The colors that cannot be seen in a particular frame are completely removed from the palette. This color determination is performed through a series of complicated math formulas.
If the MPEG standard seems complicated and extremely involved,
don't worry, it is. However, all of this number crunching does
offer a significant payoff: a remarkably small disk file. MPEG
is so efficient and compact that its standard has been extended
two and a half times. The first MPEG standard, MPEG-1, was targeted
for computers. The next iteration of the MPEG standard, MPEG-2,
is aimed at the broadcast community. This standard was quickly
incorporated by the television industry; in particular, the cable
and satellite TV industry. The MPEG-4 standard is currently in
development. It is aimed at the interactive multimedia environment
and is scheduled to be finalized sometime in 1998. You are probably
wondering what happened to MPEG-3, and the half extension of MPEG.
They are the same thing. MPEG-3 was aimed at the HDTV (High Definition
TV) audience. However, it was quickly abandoned when it was discovered
that MPEG-2 could be modified to accommodate HDTV needs.
| NOTE |
The fact that the MPEG standard allows for three frame types doesn't mean all MPEGs use them. There is a fairly large collection of MPEG files that are composed entirely of I-frames. |
MPEG, being an international standard, doesn't have any preference of usage. There are numerous MPEG players for a wide variety of platforms. This gives MPEG the advantage of being seen by more people than other formats. Both the "Hardware Options" and "Software Options" sections of this chapter discuss the creation of MPEG files. The "Client-Side Video Viewers" section covers MPEG players and the various platforms each support.
The drawback to MPEG is that it is extremely math intensive; it takes a great deal of time to create an MPEG clip. This speed hit is due to the intensive analysis and streamlining of the video sequence by MPEG encoders. However, the result of this extensive work is an MPEG file that is extremely optimized for playback.
QuickTime The QuickTime digital video format was developed by Apple. This format generally creates moderate sized files for video clips and is probably the most rapidly spreading video format on the Internet. While not as efficient as MPEG, QuickTime offers reasonable file size and video playback performance.
The QuickTime file format has two different types of frame formats. The first, and most obvious, is the static image, also known as the key frame. The second type, the difference frame, holds the differences between two frames. The most important aspect of the QuickTime file format is how the differences between frames are stored. QuickTime uses a technique known as M-JPEG. This format compresses video clips into small file sizes. However, its compression technique isn't on par with that of MPEG's.
Since QuickTime was originally developed by Apple, its main support can be found there, although there are some QuickTime players for non-Macintosh platforms. In fact, more and more Web browsers are implementing support for QuickTime movies.
The biggest drawback to QuickTime is its history. Since it initially came from the Mac, only the Mac can positively view all QuickTime files. This is because the Mac provides for many different approaches to storing files, unlike other operating systems. On the Mac, each file has a "resource fork" and a "data" fork, each of which can contain information. QuickTime files created on the Mac can use both forks, except when explicitly instructed otherwise. Most other operating systems don't have this type of file system. Consequently, QuickTime movies created on the Mac might not be viewable on other platforms. A QuickTime file must be "flattened" before it can be seen by non-Mac systems. A flattened movie file is one that has all of its QuickTime information stored into one fork. As a result of being flattened, the file can be correctly viewed when moved to other, non-Mac systems.
AVI AVI, or Intel Indeo, is another popular video file format. As you might have guessed, AVI is created and maintained by Intel but is supported by other companies. This means Intel defines the specifications for AVI. However, it is left up to Microsoft, and others, to implement those specifications.
The general specifications of the Indeo format call for two frames. The constant frame (K-frame) is a still image, just like MPEG's I-frame. The other frame is the delta frame (D-frame), which contains the differences between the two frames around it. The principle difference between Indeo and QuickTime is the encoding scheme. Whereas QuickTime uses a JPEG derivative, Indeo simply stores image differences. That is, the D-frame looks at the frame immediately before it and immediately after it and stores the differences between them.
What is probably the biggest appeal of the AVI format is that it has a wide install base. Windows 95 ships with a built-in AVI player in the form of the Media Player.
The problem with the AVI format is that it has been largely ignored until very recently. Although AVI has been available to Windows 3.1 users for some time, many users have ignored it. Typically, media clips were stored in either MPEG or QuickTime formats. AVI did not enjoy its revival until very recently when Microsoft decided to place its full support behind the AVI format, which even includes enabling its Web browser, Internet Explorer, to view AVI files.
There are a number of different ways to get a video image into the computer. Some people may already have this ability built into their computers. Others will need to buy some video equipment and, after purchasing such equipment, will probably have to buy an expensive expansion card. This card enables the computer to create video clips.
There are four basic approaches to transforming a video sequence into a computer-usable format. The first approach is to use a video camera and digitize the video segment directly off the video feed. The second approach is to use a VCR to convert a video playback into digital form. The third approach is to purchase a digital camera that automatically stores video segments in a computer file. The fourth, and easiest, approach is to purchase a computer with the necessary equipment already included.
Video Cameras The most direct approach for creating a video clip is to use a video camera. Generally, any generic camcorder will work fine because you simply want to get a video image. Unfortunately, while camcorder prices have fallen, the cheapest ones still cost around $300. However, this doesn't mean the most expensive camcorder will necessarily offer the best quality, although the more expensive camcorders do offer a significant number of features. Such features include direct video signals, fade, wipe, and similar features. When purchasing a video camera, aside from looking at price, you should evaluate the power of the lens and the quality of resolution. You should always look for higher values for these two options, as they will provide much sharper images.
As previously stated, an additional cost to the video camera is a special video card, which you should certainly consider. Such cards are not inexpensive, typically costing about $200. This card allows your system to display and record video signals. These signals can later be made into a stream of images, which can then be stored into a video file format. This file format can then be added to your Web page.
The advantage of this combination is that you can create custom video clips. After you install the special card and its software, creating a video clip is a simple matter. Just hook everything up and have the video card software save the sequence. You can use a video segment of your child's last birthday party or create your own custom home movie to show the rest of the Internet. Corporate Webmasters can use this setup to do such things as recording a member of senior management giving an introduction to the Web site. For companies who sell to large corporations, promotional material can be created for each product. This provides a unique platform for promoting goods to the company's target audience through the display of video clips on the Internet.
Again, cost is the big downside to this approach. Even low-end
camcorders cost about the same as middle to high quality VCRs.
However, most camcorders nowadays come with audio and video inputs,
enabling you to directly copy broadcast video. This allows your
Web pages to have both custom and canned video clips.
| NOTE |
You can use camcorders that have direct audio/video inputs to do audio recording. Read more about embedding audio files into your Web page in Chapter 27, "Adding Audio to Your Site." |
VCRs A second approach to placing a video clip on your Web page is to use a VCR. One significant advantage of this approach, over others, is that it's extremely cheap. New, low-end VCRs cost as little as $100-a good low-cost solution. Although the low-end VCRs certainly won't offer the same playback quality as more costly ones, the quality is acceptable under certain limited circumstances. Most low-end VCRs offer the bare minimum in editing features: stop, play, pause, and slow motion, which is usually unacceptable for digitizing video clips. The higher-end VCRs offer superior playback quality and far more editing features.
Cost is about the only reason to use a VCR to create video clips. For small businesses or organizations on a tight budget, this may be a reasonable alternative. On the other hand, if you want to use existing material in your video clip, a VCR may be advantageous for digitizing the video clip. Suppose your company issues its annual report on video tape. You, as a Webmaster, may simply want to digitize important parts of that tape, which would be both convenient and economical with a VCR.
Digital Camera A third, though less popular, approach to creating video clips is to use a digital camera. The digital camera is different from a standard camera because it captures a computer image when taking a picture. That is, it automatically converts the visual image into a digital one.
Digital cameras range in price from about $150 to $300, depending on the personal computer you own. Some digital cameras have restrictions on resolution and zoom capabilities. Generally, though, digital cameras offer video quality about equal to low-end camcorders and mid-range VCRs.
The two big advantages of digital cameras are its cost and its convenience. Unlike the camcorder combo, you don't need to purchase a special card for a digital camera. Digital cameras are convenient because they can scan still and moving images without additional hardware. This saves the time and money that is required to digitize custom pictures and video clips.
Direct Connection The fourth and final approach to creating a video clip is through your computer. For some computers, most notably the Macintosh, you don't need special video cards. Many recent Macs come with AV (audio/video) capability built right into the machine, which means you don't need to purchase a custom expansion card to record video signals. With an AV-capable Macintosh, you can create video clips just like anybody else, only cheaper. The Mac comes with pre-installed video capture software, allowing you to create video clips right out of the box.
Not everyone has enough money to purchase expensive video equipment. That doesn't mean, however, that you can't create video clips of your own. Since the standards are widely known, there are a number of software options. These options depend largely on the video file format you want to use.
MPEG Due to MPEG's original design intent and it's mathematical complexities, there are few software-based MPEG creation programs. The few that are available require the user to be MPEG proficient. One such MPEG creator is CMPEG for DOS, by Stefan Eckart. Eckart is the creator of the powerful shareware VMPEG Lite program.
CMPEG can take a sequence of still images and compress them into an MPEG file. These files must be either in Portable PixMap format (PPM), Targe (TGA), or Image Alchemy RAW format. CMPEG can create an MPEG file with three parameters. The first parameter is the control file, which specifies the sequence of MPEG "frames" to be used. Rather than go into great detail about MPEG, you should use either the I.ctl or Ipb.ctl control files. The second parameter CMPEG requires is the input file list. This parameter specifies a list of file names for each frame to be encoded in the listed order. The final parameter is the MPEG file to be created by CMPEG. A typical CMPEG command line looks similar to
CMPEG I.CTL FILELIST.TXT SAMPLE.MPG
This command takes all the files listed in Filelist.txt and encodes them using the I.ctl sequence of frames. The resultant MPEG file is called Sample.mpg. CMPEG also has a number of command-line options that can be used to further control the MPEG file that is created. You can acquire CMPEG by pointing your Web browser to http://www.prism.uvsq.fr/public/wos/multimedia/cmpeg10.zip. Once you download the file, simply unZIP its contents into its own directory. There is no installation required.
QuickTime QuickTime movies are relatively easy to create. The first necessity for creating your own animation is that the images of each frame be in PICT format. You also need a MOV creation program for the Mac, such as MooVer. Next, you have to highlight all the frames you want to make into an MOV file and drag them onto the MooVer program icon.
After you have done this, you will be presented with a dialog box asking you for a few settings. Simply click the ones you want for your destination MOV and click the OK button. You will then be shown another dialog box (see Figure 26.1) to help you control the quality of the MOV. By default, MooVer will create a QuickTime file of Medium quality. The higher the quality, the larger your MOV file will be. Higher quality frames in QuickTime movies generally equate to less compression of the frames, which means there tends to be fewer stored differences between frames. You can also specify how many frames should be shown per second. The more frames you want shown each second, the smoother the QuickTime movie. You can get MooVer from ftp://sumex-aim.stanford.edu/info-mac/gst/mov/moover-13.hqx and then simply unBinHex the downloaded file. You install MooVer by double-clicking the file after it has been converted to an application.
Figure 26.1 : MooVer allows you to easily create QuickTime movies with a Macintosh.
AVI For a relatively long time, it was extremely difficult to create AVI files without hardware. This was due primarily to Microsoft's lack of support for the format. However, there are a handful of tools for Windows 95 that will let you create AVI files. One such program is Microsoft's VidEdit (see Figure 26.2). This program offers an easy, though somewhat tedious, approach to custom AVI clips.
Figure 26.2 : VidEdit is a simple program that lets you create AVI files for Windows 95.
The square in the middle of the window shows the contents of the current frame you are viewing. The slider underneath the image of the current frame indicates where that frame exists in the video sequence. The two arrow buttons next to the slider enable you to go to the next or previous frame, relative to the current frame. The various controls for VidEdit are across the bottom of the window.
VidEdit allows you to directly capture a video image and store it as an AVI. Don't worry if you don't have the equipment. Just do the following:
Your AVI file can now be viewed or used in your Web page, depending on what you want to do with it. You can get VidEdit directly from Microsoft by pointing your Web browser to ftp://ftp.microsoft.com/developr/drg/Multimedia/Jumpstart/VfW11e/ODK/WINVIDEO/. You'll have to download every file and save them into a temporary directory. After you have all the files, simply double-click the Setup.exe program.
ActiveMovie Recently, there has been some talk from Microsoft about "ActiveMovie." Unfortunately, there has been very little information released to explain exactly what ActiveMovie is. In short, ActiveMovie is a complete programming layer that provides extensive support for video playback. It provides support for software and hardware media processing, such as mixing and using effects. It essentially gives programmers better control over graphics and multimedia in their programs, which allows applications to run in a consistent behavior under Windows.
So what does ActiveMovie give you in terms of video clips on your Web page? Among its other programming features, ActiveMovie provides a universal programming interface for playing back video clips. Instead of needing to know the file format of a particular video clip, ActiveMovie can be instructed to simply play a file. It will determine the format and correctly play it in the application. While this may not have an immediate noticeable impact on Web browsing, it will in the long term. ActiveMovie eliminates the questions about which Web browsers support which file formats. All Web browsers built on ActiveMovie will be able to handle MPEG, QuickTime, and Indeo file formats automatically. This allows the Web browser programmers to focus on more useful features.
You have two options once you have a media clip that you want to put in your Web page. The first is to completely integrate the clip into your Web page. The other is to let the user download the clip so that it can be played at his or her leisure.
The advantage of embedding a video clip in a Web page is that it adds much more to the experience of your Web page. The disadvantage is that more time is needed to download your Web page. Likewise, not everybody will have the compatibility to play your clip. As a result, the full impact of your Web page won't reach everybody.
With these considerations in mind, you should also know that it is quite easy to embed a video clip in your Web page. Simply use the HTML EMBED tag and specify the SRC attribute to point to your Web page. You can treat the EMBED tag as a generic catch-all version of the graphic image IMG tag. You can add any sort of video clip by putting the following in your Web page:
<EMBED SRC="filename.ext">
Your video clip will appear on your Web page in the exact location this statement is placed. Obviously, you need to replace filename.ext with the full path and filename to the clip you want to use. You can also specify the height and width of the clip by using the HEIGHT and WIDTH attributes. The behavior of a video clip specified with the HEIGHT and WIDTH attributes depends on two key factors: the browser and the file format. For example, in specifying size attributes for an AVI file, Internet Explorer will scale the entire clip. However, when Netscape views the exact same page, the video clip is shown in its original size.
Another possible approach to embedding a video segment into your Web page is to use the <IMG> tag. Microsoft has proposed an attribute extension, namely the DYNSRC attribute. This attribute behaves just like the SRC one, except that the file specified for it is a video clip. This was done by Microsoft to help promote the AVI format and to facilitate embedding video clips into Web pages. Unfortunately, the proposed HTML 3 standard calls for a new tag, the <FIG> tag. This tag is almost certainly intended to be a replacement for the <IMG> tag. It accepts an URL for an image and also has a number of new attributes that give Web authors much more control over the behavior of AVI files. With the <FIG> tag, you can overlay images on top of each other, provide captions for images, and provide better image map support. Although it doesn't currently provide support for video clips, this will likely be added later on. Because of the <FIG> tag, it seems unlikely that the <IMG> tag and the DYNSRC attribute will be used much in the future.
The other approach to using media clips is to make them accessible as a file. This approach is the preferred method of putting video clips into your Web page. Your Web page will have maximum user exposure without an embedded video clip. Everybody can access your page, and those who know how to handle your media clip format will enjoy it even more. The big drawback is that your Web page suddenly lacks a certain amount of splash and uniqueness.
This approach can be implemented in a number of different ways, most involving the GIF file format. One possible method is to take a screen shot of a representative frame in the video clip and save it as a GIF file. You can then create a link from the still frame to the actual movie file. Another method is to create an animated GIF of the video clip. You don't want to convert the entire video clip into an animated GIF because the animated GIF file format creates rather large files. However, you can take a short series of frames from the video clip, such as every fifth frame, and save them as an animated GIF. Then, create a link between the animated GIF and the video clip. This gives users a better idea of what the video clip is about.
Because the helper application approach is preferred when using video clips, client browsers do need an appropriate viewer. Each media clip file format is completely incompatible with every other format. Consequently, you should think about keeping all your files in one particular format. This makes it easier for you, and your users, to view the media clip. They won't get confused about which program handles which formats.
Due to the number of file formats, there are also many players.
Some players handle just one file format and, consequently, do
a great job. Others are a jack-of-all-trades but master of none.
Additionally, almost every player has its own quirks and limitations.
Table 26.2 has a list of common and popular video players, along
with their capabilities.
| Name of Program | Platform Available | Formats Supported | URL | Notes |
| Media
Player | Windows 95, Windows 3.1 | AVI | N/A | AVI player that comes with Windows 95 and Windows 3.1. Updates to player are available from Intel. |
| QuickTime Player | Mac, Windows 95, Windows 3.1 | MOV | http://quicktime.apple.
com/qt/sw/sw.html | Consistent and easy-to-use interface by the creators of the MOV format. Windows versions plugs into Media Player. |
| Sparkle | Mac | MPEG | ftp://sumex-aim.stanford. edu/info-mac/gst/mov/ sparkle-245.hqx | Good MPEG player with no sound support. |
| VMPEG Lite | Windows 95 | MPEG | ftp://papa.indstate.edu/ | Powerful MPEG player for Windows. Provides support of all MPEG frame types and limited audio support. No frame-level control, but plugs into Media Player. |
| Net Toob | Windows 95 | AVI, MOV, MPEG | ftp://ftp.duplexx.com /pub/duplexx/nettoob.exe | Acceptable multi-file format player. MOV support is available if you install Apple's QuickTime libraries. Native MPEG player is limited but tolerable. Frame-level control but otherwise a limited user and file format interface. |
Many newer Web browsers provide built-in support for the AVI file format. This allows you to view Web pages that have embedded AVI files without using helper applications. This also gives you the ability to use the browser to view such files. The biggest problem with using a Web browser as an AVI player is that you don't need a lot of the features of a Web browser. However, if you're having problems finding an AVI player, this certainly is an option. Currently, Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0 provide built-in support for the AVI file format.
Both of these Web browsers have the functionality of plug-in modules. There are a number of plug-ins that extend the capability of the browser. These plug-ins provide support for many other video clip formats. Among them are plug-ins that play QuickTime movies and MPEG files. Consequently, it's possible to completely do away with multiple video clip players and simply use your browser.