Digital Video for the Web

Digital Video for the Web

Got something to say?

Share your comments on this topic with other web professionals

In: Reviews > Product Reviews

By Jesse Nieminen

Published on January 22, 2002

Now that many people are surfing the net at broadband speeds, several web designers are experimenting with digital video. And from the looks of it, broadcast and film designers should be a little nervous when they see the innovative creations popping up on the web. As the bandwidth has increased, the cost of professional level tools has dropped into the reach of many designers enthusiastic about motion design. These are the same tools used in professional film and video production, so experience with these will broaden one’s skill set into the film and broadcast design area.

Good examples of the convergence of web design and digital video are appearing constantly. impressively im/files/includes/print.csss the designer’s distinctive vision into Quicktime movies. New York web firm WDDG has done an inspiring video project, the dreamlike Anamorph. Adobe’s explores the narrative possibilities of video integrated into a website. And Hillman Curtis is emerging as a force in motion/video design for web delivery.

They key component to good desktop video production is quality footage. The wide array of camera types and video capture cards in the past made for varying quality, unpredictable and usually unsatisfying results. Doing it right often meant costly hardware upgrades and even the use of professional dedicated facilities at some point. High quality production was still out of the hands of most.

Things have changed. Affordable Digital Video (DV) cams have vastly improved the resolution and overall quality of raw footage, and the firewire interface (IEEE 1394) has done away with the need for expensive third party capture cards. DV cams are now popular at the consumer level and promise to become cheaper and better in the near future.

There are a number of desirable DV cams on the market, and most offer great quality for a reasonable price. When you start to narrow the field to near-professional level equipment, there are just a few standouts.

Canon GL1

Canon GL1 At around USD$2300, the manufacturer describes the Canon GL1 as its entry-level professional DV cam, offering the highest-quality picture possible for non-broadcast equipment. The unit combines a fluorite lens with three CCDs (three image sensors, one each for red, green and blue, as opposed to a single one found in most DV cams) to capture images and color accurately. The GL1 also employs “pixel shift” technology, which Canon claims reduces color noise and maximizes picture detail. The image-capturing device employs 250,000 active pixels to provide more than 500 lines of resolution, about a 25% improvement over the best analog resolution.

Body and Ports

This camera is fairly compact, but the large lens hood, camera length and styling lend themselves somewhat to a pro look. At about three pounds, with an ergonomic body and hand strap, the GL1 is quite easy to carry. But make sure you hold on tight, the mostly-plastic body won’t fare well if dropped from any height.

The GL1 uses standard mini DV tapes, recording up to 120 minutes in LP mode. It has ports for S-video, composite video and firewire cables. Be aware that the GL1 firewire port is 4-pin, while your computer’s may be 6-pin. A 4-to-6-pin firewire cable will run you about $30.


The image quality of the sample footage I grabbed with the GL1 was amazing. It did an excellent job of transitioning between different lighting conditions and the auto focus worked well. Colors are accurate, and it does a good job holding detail on intricate visual patterns where most cameras produce moiré patterns. The 20x zoom (/files/includes/10.css0 with digital interpolation) worked smoothly with quality results. Picture-wise, the GL1 clearly outperforms most consumer-level DV cams.


The one downside on this camera is the quality of its sound. Indoors in quiet situations it does okay, but outdoors and in noisy settings it doesn’t match the quality of the rest of the camera’s features. It performs on about the same levels as many other camcorders, and is probably satisfactory for most uses. It’s possible to work around this by using a separate microphone through the camera’s audio input jack.


All things considered, the GL1 looks to be a good choice for those who want work with near-professional quality video. The controls are generally well-placed and intuitive, but to get full use of this camera, one must delve into the hefty user manual. In my opinion, the GL1 captures images and colors much more accurately than the consumer level cameras I have come across. Don’t expect film-like results from this camera, but do expect very high quality video footage. I know several people using this very camera to shoot independent movies, and they are quite pleased with the results.

Adobe Premiere 6

Adobe Premiere 6.0 Adobe Premiere 6.0 admirably handles video capture, editing and final production/output. My last working experience with Premiere was version 4.x, and the application has come a long way. There are many improvements to the interface and functionality that are geared toward all users, plus the addition of some amazing effects that will be tantalizing to many. Adobe has given a lot of attention to web output, making delivery of quality video for the web both easier and better.


The interface is tighter and more intuitive than previous versions. Choose different editing modes based on experience, and you can customize and save the environment for streamlined production. Premiere 6 finally adopts the storyboard window popular with other high and low end video editing solutions, and its timeline interface offers more control without having to dig into menus.


Another very important addition is the audio mixer, light years ahead of the very rudimentary audio controls of versions past. The new controls bring pro-quality audio mixing into the editing environment, making it just as easy to work with as the video clips. This was, perhaps, the most sorely missed feature in previous versions of the application. Before, anything other than simple audio tracking had to be done externally and mixed down first.

Digital Video Cam Control

One of the coolest features of Premiere is its ability to control a DV cam connected to the firewire port of your computer. Connecting the DV cam to your television at the same time with the composite video cables, the TV becomes a monitor to view your editing and effects done in Premiere. Setup is a snap, as Premiere has built-in presets for a large number of specific cameras. I had the GL1 setup with Premiere and my office television, and previewed and captured footage straight from the camera using just the keyboard and mouse, a vast improvement over the mess I used to go through with my old AV Mac 8500.

Web Output

Premiere 6 offers new tools for web output that help refine and customize your final product. They claim that the application offers one-step cross platform output for all leading web video formats. The “save for web” function launches a special version of Terran Interactive’s Media Cleaner program. In addition to assuring quality results, there are numerous output choices, including Quicktime streaming and progressive downloads, RealPlayer options, Windows Media format, AVI, CD ROM, MPEG1 and MP3. While setting parameters for these specific output choices, one can also optimize for target bandwidths. Premiere offers advanced export settings modules for the Windows Media and RealMedia formats. These offer more advanced options than those in the Media Cleaner program, and are suited to users who are more experienced with developing content for these formats.

Another new feature for web output is the ability to embed timeline markers in your movies that include URLs. This enables the movie to auto-launch HTML content in the browser at precise points during movie playback, as well as the ability to target frames in which this content will be displayed. This is exciting when considering the new interactive possibilities of video presentations.


While there are other video editing solutions out there to consider, Premiere 6 is pro-level and fairly easy to use. Its tight integration with other Adobe Products means a smooth transition for designers used to working with applications like Photoshop and Illustrator. For those looking to add video to their web repertoire, Premiere 6 offers a number of net-specific enhancements that provide professional results without hassle.

Adobe After Effects 5.0

Adobe After Effects 5.0 After Effects is the obvious choice for designers who want to explore video design. I have often referred to it as Photoshop with animation capabilities, but it is much more than that. Adobe After Effects 5.0 is, without a doubt, the best desktop-level compositing, effects and animation application available in its price range, and perhaps, in any price range. Where Premiere is an editing environment, After Effects is a design / effects environment, offering an incredible array of tools and functions for your imagination to explore. For a more in-depth look at what After Effects can do, check out my review of the previous version.

New Timesaving Features

After Effects has been used to composite imported 3D images with 2D footage, but this new version goes further. You can design and animate in 3D space, using multiple cameras and lights. It’s possible to attach a camera to a specific object, making it follow while the object moves through the environment. The ability to work in 3D space in After Effects is welcome for those of us with headaches from trying to figure out the logistics of faking it in the past. I can’t wait to play with this more.

Other improvements to version 5 include non-destructive vector paint tools, enhanced masking capabilities, and several new interesting effects. You can define relationships between objects and parameters, making hierarchical animations automatic. For example, link two objects together at a point, and animation applied to the parent object affects the child object in relation to that point. This is a huge timesaver and does away with little glitches that could pop up working with objects visually related to each other in the composition step-by-step.


Of course, After Effects 5 also sports a tighter interface in-line with all of its other recent products, as well as improvements in how these products interact with it. One of Adobe’s greatest strengths is its common interface standards and After Effects makes the most of it. In turn, a number of improvements to After Effects over the years have trickled into interface improvements of apps like Illustrator and Photoshop, not to mention its very close descendent, LiveMotion.

Input / Output, Export / Import

After Effects also offers numerous web format output options aside from its vast array of film and video output choices. For certain situations, Premiere is the better choice for output, as some projects may require advanced video and audio editing. In this case you import your After Effects work into Premiere. But, if you are outputting a simple animation or movie, there are some good tools provided.

Version 5 can export movies as SWF files, offering precise control over how bitmaps are rasterized. Be aware of the limitations of the SWF format when it comes to bitmaps. Imported layered Illustrator files can easily be output as SWFs, and After Effects effects like path text are easily output as Flash movies.

Other web-friendly improvements include the ability to embed URLs in SWF, AVI and Quicktime files, giving you greater interactivity for your animations and movies. Quicktime and MP3 audio compression codecs are also supported, ensuring smaller file size and better quality audio to go along with the motion.

Although expensive, After Effects truly brings cinematic effects to web video, the same cinematic effects that it brings to the cinema. It inspires creativity and it’s a joy to use. If you are looking for a way to integrate design with digital video, this is what you want.

(At press time, version 5.5 of After Effects had just been released. Of concern to the web design aspect of this review, version 5.5 can now also import SWF files.)


Video on the web has various uses, and almost as many ways to view it. This is an important consideration when creating video content for Internet delivery. Low bandwidth players such as RealPlayer and Windows Media viewer are acceptable for low quality footage and utilitarian uses, but are rather unrefined in both design and delivery. There are numerous proprietary video viewers and plug-ins that come and go without making much of an impact. The standout delivery platform for video over the Internet is Quicktime, which offers the best quality and constant improvement while keeping up with advancing technologies. Quicktime also offers a greater level of interactivity than other formats, which should preserve it as a standard for some time to come.

With the proliferation of Flash, there’s no doubt that many web designers are interested in motion design. It’s probable that many will want to jump to video design, as some innovators already have, redefining both disciplines in the process. I look forward to improvements on today’s present technology and brand new tools we have yet to see that will blur the lines between the various media in which designers work. Of course, with the economy the way it is, it’s probably a good move to broaden your capabilities if you haven’t thought about it before.

Got something to say?

Share your comments  with other professionals (0 comments)

Related Topics: Motion Graphics