WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Putting Video on Your Web Site:The Basics

Putting Video on Your Web Site:
The Basics

by Wayne Bremser
Reprinted from Web Developer® magazine, Vol. 2 No. 2 May/June 1996 © 1996

Video is a medium that is as direct as print and catches more attention. If your company has something to say with video, that video should be on your Web site. This year, exciting new plug-ins and helper apps for Netscape Navigator make it possible to integrate video into your Web page, making it more like a CD-ROM. Other helper apps make it possible to "stream" video. Streaming video is attractive to many, because even though it is much lower quality, there is hardly any wait for download.

Although it's time-consuming, the process of digitizing, editing, and uploading your video files is not an extremely complicated process. The only thing that should scare you about the process is the bandwidth that you will be using (and the legal problems of posting clips that may not belong to you). Before you get serious about doing this, you should ask yourself: What is the value the video adds to the Web site? Does it justify the effort spent digitizing the video and making it ready for the Web? Will people who come to the Web site actually spend their time downloading it? At 28.8 Kbps, a 1 MB file representing a few seconds of video will take about 10 minutes to download. Spend a day or two surfing the Web looking for video files, and download as many as possible to get a good picture of how and why other people are using video on the Web.

File Types

There are three main video file types that you will encounter on the Web: QuickTime, AVI, and MPEG. MPEG and QuickTime are most commonly found, with QuickTime probably being the most popular; many large entertainment sites (such as mtv.com, mca.com, and sony.com) use QuickTime exclusively.

AVI is a Windows-oriented video format that is not used as much as QuickTime or MPEG because of problems with syncing up audio and video. For this reason, AVI is the least popular of the three main file formats on the Web. Easy conversion from the other formats to AVI is available. Since QuickTime is readily available for Windows as well as the Macintosh, the need for AVI is rapidly vanishing from the Web.

MPEG's (Moving Pictures Experts Group), main advantage over QuickTime is the extremely high output quality. MPEG was developed as an international standard for use in CD-ROMs, video games, and other media that require quality digital video. For the tradeoff of using slightly larger files, you get much higher-quality video, with up to 30 frames per second (the same as standard American TV).

The primary disadvantage of MPEG is the cost of getting it digitized and playing it back. It does require special hardware to digitize video into MPEG, and specific hardware is needed to play back MPEG with any sort of quality. The hardware to digitize MPEG is extremely expensive, starting around $4,000 for a lower-level digitizing board. Another drawback is that even though many IBM-compatible machines come out of the box with MPEG playback hardware, the quality of playback often varies. Video that might look great on a Compaq might look horrible on an Acer. Also, MPEG is not compatible with the Macintosh platform, so those users will be excluded from seeing your video.

QuickTime on the other hand, is a software video standard developed by Apple that is currently available for playback on both PC and Macintosh. Digitizing video into the QuickTime format requires hardware that is extremely inexpensive compared to MPEG. Four thousand dollars can purchase a higher-end QuickTime digitizing hardware board, and there are several Macintosh models available that come with built-in A/V boards that will produce acceptable results. Since it is software-based, editing and manipulating QuickTime video is much cheaper and easier than using the MPEG format.

Process Your Video

The first step in the process is finding video to process. The higher the source quality, the higher the results after you digitize it. So try to get source that is higher quality than VHS, possibly Hi8 or even Betacam. Hi8 is probably suitable for most Web projects. If you work in the entertainment industry, you no doubt have access to higher-quality equipment than Hi8.

If you want to work in QuickTime, digitizing is not a problem. Many Macintosh systems come with built-in A/V equipment that makes digitizing video as easy as plugging in a video source and having enough disk space. Radius makes the extremely popular VideoVision board, which is a hardware solution for video capture.

When capturing video for use only on the Web, consider the size of your movie. Unlike CD-ROM, you probably are not shooting for full-screen video with the best resolution possible from QuickTime. Instead you are trying to get a small, tight image that looks good with compression. Using the plug-in to embed QuickTime in your Web page makes a great impact, but you have to plan ahead of time as to how large or small you want the movie to be. Choose standard sizes to capture video; for the Web the standard is a small 160x120 pixels.

Editing video is manageable with several software tools from Adobe. Like many of Adobe's professional graphics programs, these software packages are extremely effective and accordingly priced. Premiere is a professional editing tool for both Macintosh and Windows that allows you to import several video clips and easily splice them together while incorporating static images such as Photoshop or Illustrator files. Over 50 transitions and filters come with Premiere, and creating your own is a pretty straightforward process. Premiere's interface allows you to sync up audio and do many things that were traditionally left to post-production houses, including output to video.

AfterEffects, which has been called "Photoshop for video," is another video editing tool from Adobe that has been receiving lots of attention from the design and artistic communities, because it is very powerful and utilizes a familiar interface. Video can be brought in, and filters and effects can be applied to single layers (in fact, Photoshop files can be imported with layers intact). The effects included are similar to those found in Photoshop: blur, scale, rotate, distort.

Sound Advice

Sound is a very important element in video that has been sadly neglected by many people. Your best bet for achieving quality sound is to get an audio-editing software package, and treat the sound in your video as a separate element that needs special attention. Separate the audio from your video (in QuickTime the easiest way to do this is with MoviePlayer 2.1 and exporting the audio to AIFF). Listening to the audio separately with headphones (preferred) or decent speakers gives you a better idea of what people will hear. Whether or not people who download the video actually pay special attention to the audio separately is not the issue; poor audio quality will affect their overall impression of the video quality.

Tools like SoundEdit 16 from Macromedia allow you to remove the sound from QuickTime files and edit it like regular audio, adding filters and equalization that will be necessary to get powerful sound out of your video. Another important feature in the latest release of SoundEdit 16 is built-in IMA sound compression for QuickTime, which allows 4:1 compression of the audio track in movie files.

The final process of getting your video digitized and ready for the Web is compression. For QuickTime there are several applications that just handle compression. The most popular compression is Radius' Cinepak, a cross-platform compression/decompression software package that has been used by many companies (including Creative Labs, makers of PC audio and video equipment). Cinepak is the best compression method for most video needs, although using it can be time-consuming, and balancing image quality and compression can be tricky. On the audio side, the previously mentioned IMA supports 4:1 audio compression at 16 bits of resolution. This allows your audio to sound great while not becoming a burden in terms of bandwidth.

Upload It!

Once you have produced your video, getting it on the Web is an easy process. If you use an Internet Service Provider, find out how much disk space you are allowed to use. If you have several large video files to upload, you may be exceeding your disk quota. Most ISPs have a quota on bandwidth as well, and if your videos are popular, you may break this quota. A typical quota is transferring 200 to 300 MB a day. If you have a 2 MB movie file, it will take only 100 downloads a day to exceed your quota.

If you maintain your own server, set up your server's MIME types. MIME types are file types that a server recognizes, so when people download a .mov or .mpeg file, the browser will know to launch the appropriate helper app or utilize a plug-in. Some ISPs require users to change MIME types; check with your ISP's FAQ. In your Web site's public_html directory, create a separate directory just for video (or "media"). When you actually ftp the files to your Web site, you will get a firsthand look at how long they will take to download.

After uploading the file, you'll have to create a link to it on your Web page. Pages with video commonly will have a JPEG screen shot of the video at the actual size (sometimes people will enlarge the image, but this fools people into thinking the video size is larger than it is). Next to the screen shot, tell the viewer what format the video is in, its length in minutes, and how much disk space it takes up. Leaving out this information will hurt your chances of people actually viewing the clips, as people don't want to download something they are not sure about. As a final check, download the file yourself, using several different viewing programs, to make sure it works with all of them from the Web.

[ Putting Video on Your Web Site: The Basics:
Part 2 > ]

HTML5 Development Center

Recent Articles