John McGowan's AVI Overview: AVI and the Worldwide Web
Effective Use of Video on a Web Page
The limited bandwidth of the Internet is the bane of effective
use of video on a Web page. Video clips on a Web page need to
be small. Even then downloading a video clip can take several
minutes, hours over a 28.8 modem to someone's home. The longer
the wait, the better the video should be!
FIRST AND FOREMOST, tell a story!!! A video clip without a
story is usually boring. A story can be told in 30
seconds, the duration of many television advertisements. Some
stories can be told in less time. Because of the bandwidth
limitations of the Internet, even 30 seconds is a big file, several
megabytes.
Characters, human personalities, sell. Sex sells. Violence
sells. Talking heads (your company's CEO saying "Welcome to our
great Web Site") tend to be boring.
USE AUDIO! Sound makes a world of difference. Use base, lower
frequencies in the soundtrack. Human beings are more sensitive to
low frequency sound. A soundtrack with more base tends to sound "better" to
most people. Most computer speakers are very cheap and don't
reproduce high frequencies well anyway. You will likely cheat
on higher frequencies to reduce bandwidth use by the audio as well.
TECHNICAL ISSUES
For widest distribution and ease of viewing:
Provide video clips as AVI using the Cinepak codec. For maximum
distribution, also provide flattened QuickTime files again using
the Cinepak codec; these can be played on both PC's with QuickTime
for Windows and on Macs. Provide MPEG-1 clips as well.
Give the size of the video file in KBytes or MBytes in text as part of
the link to the video file. This way the viewer can estimate how long
it will take to download the file if they wish to.
If you use less standard codecs or file formats to get smaller file
sizes, provide links to download the needed viewers or codecs.
Provide the AVI's with less standard codecs (e.g. VDOWave from VDONet)
in addition to Cinepak versions. Don't omit the Cinepak versions.
VIDEO ACCEPTABILITY
Video encoded at less than 15 frames per second usually looks very
jerky to human viewers, like a slide show rather than smooth motion.
Most viewers seem to perceive some jerkiness in 15 frame per second
video. The transition to smooth motion occurs somewhere in the range
15-17 frames per second. If motion is limited, frame rates below 15
may look acceptable, although often not.
The early motion picture industry standardized on 16 frame per second
film, which seemed to provide smooth motion in most cases. This
appears to be the origin of the folklore in video engineering that
16 frames per second is the transition to smooth motion.
Modern film uses 24 frames per second.
Image resolutions should be 320x240 or larger. In some cases, smaller
sizes such as 160x120 may work. In general, most viewers find sizes
smaller than 320x240 too small.
DO NOT COMPRESS the video so much that unnatural artifacts such as
blocking occur. In general loss of fine details appears natural
to human viewers. This corresponds to changes in natural viewing
conditions such as viewing an object at a distance or in poor lighting.
Unnatural artifacts such as visible 4x4 pixel blocks or 8x8 pixel
blocks jump out at most viewers and destroy the illusion of a natural
image.
AUDIO DISTRIBUTION
For AVI, sound codecs aren't very standard. Avoid using audio compression,
especially more exotic codecs. ADPCM may be ok. Again, if you use
an audio codec, make sure to include a link on your Web site to
download the codec. If possible, provide a version of the AVI without
special audio codecs (and Cinepak video).
AUDIO ACCEPTABILITY
Uncompressed audio takes space. You ALMOST NEVER need to use the 44
KHz sampling rate. At most, use 22 KHz sample rate. Many people
cannot hear the frequencies above 11 KHz (the sample rate is twice the
highest frequency that the sampled audio data can represent
faithfully). People who can hear frequencies between 11 KHz and 22
KHz are not very sensitive to these frequencies.
See if the soundtrack works ok at 11 KHz 8 bit Mono (not Stereo).
Use this low quality setting if you can get away with it (often this
won't work).
NOTE: You can select audio and video codecs, convert the frame rate,
convert the audio sampling rate, and resize the video using video
editor applications such as Adobe Premiere or VidEdit. See the
section on video editors:
Video Editors
TO REPEAT:
TELL A STORY!!! Many video clips in current (7/20/97) use on Web
sites are very short, a few seconds, and really don't tell a story.
These clips are boring! So are most talking heads (I have one on
my Web site and it IS boring). Movie trailers, short television
advertisements, etc. illustrate what is needed. If you don't have
a story, think seriously about dropping the video.
See elsewhere in this overview for information on authoring AVI files
and converting to QuickTime and MPEG-1.
Return to Top
How to embed an AVI file in a Web Page:
A Simple Hypertext Link
The simplest approach is to use the anchor tag
< A HREF="http://www.somplace.com/movie.avi" > A Movie </A>
In this instance, clicking on the link will cause the AVI file
to be downloaded. The browser recognizes that the AVI file is
not an HTML document. Typically, the browser invokes a helper
application that can play the AVI file, such as Media Player under
Windows 3.1. The movie will appear in a separate window. The browser
may have a plug-in that provides support for AVI, in which case the
video window will appear embedded in the HTML page.
Web browsers such as Netscape and Internet Explorer know how to handle
a file through a Content (MIME) type reported by the Web server. For
example, the MIME type for AVI files is video/avi. The browser may
contain a built-in decoder for this MIME type. For example, JPEG and
GIF still image compression decoding and viewing is built into
Internet Explorer and Netscape. The browser can be configured to
invoke a helper application such as Media Player. Helper applications
are invoked as separate applications with their own windows.
The browser can be configured to use a "plug-in" instead of a helper
application. A "plug-in" is a software component that extends the
capabilities of the browser. The "plug-in" handles input and presents
output embedded within the page. For example, a video plug-in's
decoded video appears within the page, not as a floating window.
In the case of a simple hypertext link, a browser with an AVI
plugin will jump to a blank page with the AVI video appearing in
a rectangle in the upper left corner of the blank page. The video
is not embedded in the page with the hypertext link. It is
necessary to use the Netscape EMBED HTML tag (see below) to produce a video
embedded in the page. Using the EMBED tag is different from using
a simple anchor A tag (hyptertext link).
If the browser is unable to handle a MIME type (no built-in capability
exists and no helper application or plug-in is specified), the browser
will present a dialog box asking the user to select an application,
save the file to disk, or cancel the operation.
In both Internet Explorer and Netscape, the user can configure the browser
to use helper applications or plug-ins as desired.
Netscape now provides a Netscape plug-in known as LiveVideo to play
AVI files. This plug-in should be installed in the \NETSCAPE\PLUGINS
directory. For the Windows 3.1 (16 bit) version of Netscape this
plug-in is named NPAVI16.DLL.
Digigami provides a plug-in for Netscape Navigator (Windows) called
CineWeb that adds playback of AVI, QuickTime .MOV, and MPEG files.
The URL is:
http://www.digigami.com/CineWebPress.html
Microsoft Internet Explorer HTML Syntax
Microsoft's Internet Explorer 2.0 added attributes to the IMG tag that
allow for inline video (an AVI file actually embedded in the page
rendered by the Web browser). These are the DYNSRC, CONTROLS, START, and
LOOP attributes. For example,
< IMG DYNSRC="movies/movie.avi" CONTROLS SRC="movies/movie.gif" >
This will embed the movie in the page with some simple playback controls
for the user to select. Browsers that do not support the DYNSRC attribute
will use the SRC attribute and display the image movie.gif instead.
Internet Explorer will ignore the SRC attribute.
In the Microsoft spirit of a new API every week, Microsoft has added
some new tags in Internet Explorer 3.0 and is discouraging use of the
IMG tag and DYNSRC attribute.
In Internet Explorer 3.0, Microsoft has added support for the Netscape
EMBED tag, see the section on HTML for Netscape's LiveVideo below.
Microsoft has also added a Microsoft specific OBJECT tag which does
essentially the same things as EMBED and is overtly linked with
Microsoft's OLE/COM/ActiveX environment. Naturally Microsoft
recommends using the OBJECT tag.
Unlike Netscape Navigator, Internet Explorer on Windows does not use
plug-ins, either from Micrsoft or 3rd parties, to view AVI. Rather it
invokes either the Video for Windows media player or the ActiveMovie
ActiveX control. If necessary, Internet Explorer is able to effectively
embed the applications in the Web page.
Microsoft has a copyrighted white paper "File References on HTML
Pages" on their Web site that provides a detailed description of
referencing AVI files on HTML pages for viewing with Internet Explorer.
http://www.microsoft.com/devonly/tech/amov1doc/amsdk008.htm
Since Microsoft reportedly has $9 billion in cash for acquisitions,
lawyers, and other fun - and I don't, I will refrain from simply
incorporating the document here.
Netscape LiveVideo HTML Syntax
If you hunt around the Netscape Web site you will find the following
detailed specification of the HTML syntax for embedding an AVI file
in a Web page for use with the LiveVideo Plug-in.
LIVEVIDEO SYNTAX
DESCRIPTION
LiveVideo plays video files in AVI format. (Currently for Windows 95 and
NT only.)
HTML SYNTAX
© 2000 by John F. McGowan, Ph.D.
Disclaimer
jmcgowan11@earthlink.net