Video, Animation, and Multimedia

• Learn how to create great multimeda content
  Creating multimedia content requires a variety of dedicated hardware and software tools, such as a video camera, a multimedia authoring system, or an animation program.
• Choose between straight HTML and multimedia content
  Some kinds of information are more suitable for multimedia presentation via plug-ins, as opposed to straight HTML.
• Work within the user’s limited bandwidth
  Bandwidth is an important limiting factor when delivering multimedia content in HTML documents, especially over the World Wide Web.

Video, animation, and interactive multimedia presentations can really liven up your pages. They pull in and involve your audience in a way that simple text and static graphics can’t. Of course, presenting inline multimedia elements means creating and delivering a whole new kind of page content that can’t be viewed by using browser programs that only understand HTML. Only plug-in capable browsers can display such a wide variety of multimedia content.

Though plug-in compatible content integrates almost seamlessly into your pages, developing and delivering that content involves steps that are quite different than those involved in creating straight HTML pages. Each type of content—video, animation, and multimedia—must be created using a different program specifically designed to create that type of content. Each must then be recognized with the client browser or displayed by using a different browser plug-in or helper application (for the Netscape browsers) or a similar Active X control (for Internet Explorer). For the purposes of this discussion, we will refer to any of these browser extensions as plug-ins.

Limitations on Multimedia Content

Many real-world factors place a practical limit on what kinds of plug-in compatible content you can use on your site. File size and browser compatibility are certainly two primary considerations. If your content needs a plug-in not already installed on a user's system, what are the chances that your reader will download the missing piece?

File Size and Dialup Connections

When developing plug-in compatible content for delivery over the World Wide Web, a prime consideration is bandwidth, or how much data can be delivered to your audience in a given amount of time.

Users with fast, direct-dedicated T1 or T3 or DSL or broadband connections will, under ideal conditions, have little problem viewing real-time videos or listening to real-time audio broadcasts. Even interactive multimedia presentations will be loaded and ready to display in a reasonable amount of time.

Those connecting to your Web site via dialup connections will have problems viewing large files of any type. Over a standard dialup connection (which may range from 14.4Kbps-56Kbs),  large GIF and JPEG graphics can take several minutes to load. Pages that are extremely graphics-rich can take 15 minutes or more to download over such slow connections. Multiply the problem by a factor of 10 or 100, for video and multimedia content, and you begin to see that plug-in compatible content is not generally a realistic option for those who are connecting to the Web via a dialup connection. My general guidance to keep pages minimum and under 50 Kb total size in still worthwhile.

Remember that the real issue is file size, not content type. A MIDI music file might be only a couple of kilobytes in size and is a good candidate for delivery even over dialup lines. Videos and multimedia presentations are not totally out of the question, either, as long as your viewers are willing to wait for them to download first—you won’t be able to stream them for viewing in real-time. The issue here is whether or not the content is worth waiting for.

If you consider who your audience is, it’s easy to determine what types of content you can provide. If your viewers are likely to be connecting from university, corporate, or government sites with direct Internet links, then bandwidth is not generally an issue, and almost any type of content can be incorporated into your pages. On the other hand, if most of your viewers are likely to be connecting to the Internet via dialup lines from home or through online services, your pages should be sparser, with smaller files that can be viewed in a reasonable amount of time over a slow dialup connection.

A good rule of thumb is to remember that a 14.4Kbps dialup can read a maximum of about 1.7K (kilobytes) of data per second from the Net. Thus, a 25K file will take about 15 seconds to download (if everything goes well). A 250K file will take two and a half minutes. If that 250K file is a 10-second animation, your viewer is likely to feel cheated for having been forced to wait so long for such a short display. Then again this may not be the final problem, since the typical user will only wait a max of 10-20 seconds before clicking off to another page. Keep this wait/reward ratio in mind whenever you develop any fat content for your pages, and you should be able to keep your site under control and your audience happy.

What Are Plug-Ins Best Used For?

So what use are plug-ins? Plug-ins can deliver content that is more vibrant, interactive, and involving than straight HTML text or standard graphics (GIF, JPG, or PNG). They are best used to deliver content that goes beyond what text and graphics can do. If the browser does not recognize the media type, it searches for a helper application or plug-in configured to display the new file type. A helper application is a program run in window separate from a browser. The newer and more common plug-in is an extension to the browser that handles media object directly within the page.

Before you include any plug-in compatible content on your pages, ask yourself the following questions:

• What is my message?
• How does this content help me deliver my message?
• Will viewing this content be a pleasing experience to my viewers?
• Will my viewers get the message better by interacting with this content than they would without it? Keep in mind the wait/reward ration you learned about earlier.

If you can answer these questions in the positive, you can justify using at least some plug-in compatible content on your pages. SOme of the most commonly used plug-ins include the following:

• Adobe Flash Player
• Adobe Shockwave Player
• Adobe Reader
• Java Runtime Environment
• Windows Media Player
• Apple Quicktime
• Real Player

Plug-in Content Creation Programs

Every plug-in delivers content created by its own unique content creation program. That’s a fact of life. Just as you must use a paint program to create GIF graphics, you must use the proper audio digitizing, video grabbing, spreadsheet creating, or other type of program to create each type of plug-in content.

And each content creation program is unique, with its own user interface, controls, quirks, and capabilities. The sad truth is you have to install and learn to use a whole new program for each and every type of content you want to create.

From a real-world point of view, this is going to limit the amount and types of content you can provide on your pages. While it might sound appealing to have a site that includes audio, video, multimedia, interactive games, spreadsheets, ad nauseum, the truth is that you simply don’t have time to learn how to create and deliver every single kind of plug-in content in existence. You have to be selective.

Don’t forget your audience, too. For every plug-in you use, that’s one more plug-in they’re going to have to install. If they need to download and install   plug-ins before they can view your page, the odds are good that they’ll just move on to a more user-friendly site!

That means sifting through the chaff to find the kernels of wheat. And, of course, what’s chaff to some is wheat to others. Animation might be what you want to present on your personal Looney Toons Web site, while in your day job as an investment analyst, you might be more interested in putting spreadsheets on the corporate intranet.

Keep It Small

It is worth saying over and over, for delivery on the World Wide Web, bandwidth is the primary consideration. That makes on-demand plug-ins most appropriate for Web pages. Video in real-time is a practical impossibility on dialup connections. It’s best to avoid real-time video on your Web pages, but nonreal-time (that is, download-then-view) files are okay, as long as you warn your audience that long download times are involved.

In general, try to keep your files as small as possible. Multimedia games are fine if they download quickly. Remember that much of a plug-in compatible file’s capabilities come from the plug-in itself. Data files may be relatively small while incorporating a lot of flashy content. Watch your file sizes, and don’t worry about how much the file is doing. If it’s doing a lot but doing it very efficiently, that’s the key to successful plug-in use over the Internet.

Video and Animation Plug-Ins

Pictures that move—that’s the magic of video and animation. With only sound and graphics, HTML documents are static. But with video and animation, pages come alive with television-like action.

Of course, all this motion comes at a price—even a few seconds of video or animation can come in a package of several megabytes, and with the transmission times involved in transmitting data over the Internet, that can mean sluggish response and jerky images.

When to Use Video Content

You’ve got a stunningly cute video recording of your little niece spitting up her first mouthful of strained peas, and you have a hunch it would make a wonderful addition to your personal Web page.

Uh...probably not. Unless you specifically target and develop content for your own circle of friends and  relatives, the odds are good that nobody is willing to wait the dozens of minutes it takes their dialup connection to download 15 seconds of video that shows your little darling. However, it may be a misfortune of technology, but now it is practical, easy, and free to produce video of about anything, and host the content on public sites for the world to see. Perhaps the world will flock to see your niece if the content is sufficiently outrageous or unique. So much trivial and shocking content routinely attracts millions of visitors, so I guess one cannot predict the discrimination of viewers.

Video Speed

If hosting on your server and accommodating alternatives on your pages, it’s important to keep in mind the effort/payoff ratio. With video and animation, that ratio is often very low.

If your audience is mostly connecting to the Internet via a dialup connection, your use of video should be sparse. Not only that, you should give your viewers ample warning. Don’t put a video on your home page. Instead, put a link to your video content, and include a warning next to the link that tells them how long they can expect the download to take, and how long a video clip they’re going to experience for their trouble.

A 14.4Kbps connection can deliver, at best, 1800 bytes of information per second; a 28.8 dialup twice as much (3600). Divide the size of your file (in bytes) by these numbers, and put those figures in the warning on your Web page, like this:

• View a short movie of the Hindenburg disaster
• This video is 1MB in size. On a 14.4 connection, it will take approximately 9½ minutes to download. On a 56K connection, it will download in approximately 2 minutes.

If you are delivering information mostly to those who connect directly to the Internet via commercial, university, or government sites, then you can be more generous in your use of video. Users on a 56Kbps direct line will be able to download a 1M video in just a little over two minutes. Still, two minutes is a good chunk of time. If you are using a video plug-in capable of streaming its content (so that the video can be viewed as it’s coming down the line), you have a lot better chance of keeping your viewers with you. However, you also stand a chance, even on a fast direct line, of having your video content not keep up with real-time. In other words, your viewers may experience skips and jumps.

On a corporate intranet, such worries vanish. You should be able to deliver video content at will. However, if your corporate intranet includes remote sites connected via the Internet, remember their special needs.

If you study the current trends of online video hosting such as YouTube, you can get a better idea of what type of video can easily be hosted - using someone else's server bandwidth, with the linking code generated for you! More on what it takes to make a movie later.

Content Considerations

As always, after the technical details are worked out, your major consideration should be this: does the content add to the value of your site? Is it relevant? Does it fit your theme and topic? If the answer to any of these questions is No, you should probably ask yourself if something else would do the job better.

Videos and animations are especially suited to the following tasks:

• Training—Many people learn better by watching someone else do something before trying it out for themselves.
• Education—Historical film clips, entertaining animations, and other visual aids can be extremely useful in helping to emphasize and illustrate important concepts.
• Entertainment—If your site is mostly devoted to entertaining your viewer, video clips and fun animations are some of the best entertainment around.
• News—People are used to getting their news on TV, and if you are in the business of delivering news to your viewers, clips of important events connote an immediacy and sense of involvement you just can’t get from text and still images.

Pages where video and animation should be used sparingly or not at all include the following:

• Lengthy Presentations—If your presentation goes on for many pages, using too many video or animation clips slows down your presentation to the point that only the most dogged viewer will ever get through it all.
• Index Pages—Pages of links should be used as reference points, not sources of entertainment. If your link pages include videos, it’s a sure bet that people won’t be willing to suffer through the long load times again and again just to use your links. They’ll go elsewhere.
• Reference Material—If the main purpose of your site is to serve as a reference source, at least have the courtesy to link to any videos or animations—or big graphics, as far as that goes. If people are going to come back to your site on a regular basis, they will not want to have to load in video data every time.

Not only do you need to consider the time your viewers will be putting into downloading and watching your videos and animations, you need to consider the time you’ll invest in creating it.

Creating Video Content

When you get down to it, videos and animations are essentially the same thing—a series of still images presented one after the other to give the illusion of motion. The only real difference is the source. Videos are generally a series of digitized, real-world images, while animations are usually hand-drawn or generated from a model.

Using a PC to digitize high-quality video from a live source is surprisingly complex and expensive. Just as you need a sound card to digitize audio, you need a video digitizer card to digitize video. These aren’t cheap. You can buy a card (or external box) to digitize a single image inexpensively. But to capture live video streams requires a super-fast card. Not only that, you need a fast system with lots of memory and a huge amount of online storage. But with storage and memory relatively cheap, a computer system set up to do real-time video digitizing may look a lot like a high-end gaming system, and it may be purchased for well under $2,000. But then the sky's the limit with video mixers, editors, Embedded Digital Video Recorders, and other esoteric add-ons.

But there are cheaper solutions. Unfortunately, they involve that annoying equation you seem to run into everywhere in life:

• Time = Money

There are always people looking for ways to turn a quick buck with their computers, and the odds are good that living close to you is someone who has already shelled out for one of the mondo-expensive frame grabbing systems. Check the Internet for Video Digitizing services. Prices vary greatly, but you can probably get a rate comparable to $40/minute. (That’s per minute of video time, not per minute of conversion time.) There are, of course, companies that offer these services over the Web, too. You’ll find some listed at the Yahoo! index for multimedia services.

A less expensive, though more time consuming, method of creating video clips is to employ an animation technique; digitize individual frames using an inexpensive frame capture device, then assemble them using an animation program.

But the easiest way and least expensive way to produce video uses inexpensive video cameras, digital cameras, and cell phones to capture video low resolution movies. The entry level movie editors are easy to use, inexpensive, and they have most of the features you would need for Web-based video. Windows Movie Maker is a free download for Windows systems and  Apple has iMovie available for the Mac.

Animation

You can, of course, also draw animations frame by frame. Even at a slow playback rate like 11 frames per second (considered the absolute minimum, even by today’s cheap Saturday morning cartoon production houses), you can see that this takes time. It’s another great argument for using video and animation sparingly. But if you’ve got talent and all the time in the world, you can use tools like Pixar’s RenderMan (a close cousin to the software used by Pixar to create the smash hit movie Toy Story) to create your own animation masterpieces. Other capable and popuar high-end animation programs are available from Kinetix and Lightwave.

You can always try a gif animation on the cheap, but output is limited by your drawing skill and files are large. Probably the best content for the Web in terms of file size, flexibility of viewing, and availability or plugins is Flash from Macromedia.

For links to many publishers of animation programs, check Yahoo!’s list of animation links.

Video Plug-Ins

There are four standard video formats: Audio Video Interleave, Windows Media Video, QuickTime, and MPEG. AVI and WMV are standards for PC platforms; QuickTime is used extensively on the Macintosh; and MPEG is the standard for high-end video.

An AVI driver is built in to the Windows operating systems. Windows’ Media Player is the system-supplied, stand-alone application for playing Video for Windows movies, which are identified by the file name extension AVI (stands for Audio Video Interleave). Not surprisingly, AVI format movies have also become popular on the Web. With the right plug-in, you have no problem viewing them inline in HTML pages.

Animation Plug-Ins

Everybody loves a good cartoon. A simple animation can add a lot to your Web page. Though animations are essentially the same as videos, there can be a great difference in scale.

Videos take up a lot of memory, storage space, and transfer bandwidth, because videos images are usually complex, real-world images composed of a lot of pixels in a wide variety of colors.

Animations, on the other hand, are often simple images comprising only a few colors. Because of this, they compress extremely well in comparison to video. If they are put into a proprietary format that is optimized for the delivery of simple animation, they can be even smaller.

Compression is one good reason to consider animation when livening up your pages. If you pick a good format, you can deliver animations hundreds of times faster than you can deliver video clips.

Animation always requires at least two proprietary programs, one to create animations and save them in a special format, and a second to play back those special format files. Because you can’t create animations unless you use these companies’ animation-creation products, you won’t have any material to embed unless you download or buy their programs anyway. These animation creation programs all contain extensive information on how to include the final result in your pages.

Multimedia Plug-Ins

There are dozens of multimedia authoring systems out there, and it seems like every one of them has a plug-in for delivering its particular brand of multimedia file inline in HTML documents. Is all this really necessary?

Taken in the context of the "Big Picture," probably not. Java and JavaScript are turning out to be the new tools of choice for application, animation, and multimedia applications in HTML documents, mostly because the major browsers—Netscape Navigator and Microsoft Internet Explorer—support embedded Java applets.

But that means you have to be a programmer to develop multimedia content for your pages, and not all of us are programmers. Thanks to multimedia plug-ins, we don’t have to be. If your users are willing to download and install a plug-in, you can use just about any of the multimedia programs discussed in this chapter to bring multimedia content to your site. And you can pick the one that’s most appropriate to your requirements.

Over corporate intranets, the solution is even simpler—if you’ve been using one of these programs to create presentations, training materials, or other multimedia content for your company, you can instantly make that content available to your entire organization by installing the right plug-in on all your desktop systems. You get another advantage from this: anyone can develop multimedia for your intranet using end-user development programs. You don’t have to rely on your programmers to do it for you.

More Information

The Web Style Guide to Multimedia at webstyleguide.com/multimedia/index.html contains guidelines for developing multimedia content and sites.