Incorporate Graphics manipulation from Neiderst, Chap 9, pp157+
?? Incorporate VRML??
Drafted:
3/25/00
10/22/01
Currently
being upgraded!
COSC 330
LEARNING MODULE
V
MULTIMEDIA IN WEB
PAGES
After
learning how to format and manipulate text in HTML documents in the preceding
two LMs, we need to consider how multimedia (graphics, animation, audio,
and video) can be used to agument the text in order to make the overall
presentation more effictive. LM V focuses on the basic concepts
of different multimedia types which are defined by their MIME types,
(review LM
I, section 4.3) and the tools with which to create and edit such
files. Therefore, what
follows is a concise, practical introduction to multimedia
as it applies to Web development. It is NOT an in depth presentation
of the theory of graphics nor a comprehensive treatment of the techniques
and skills for incorporating multimediat into Web documents. Instead
we
focus on the essentials needed to allow us to effectively augment text
with multimedia elements, the what, where, and how to use multimedia
in Web sites.
See
the Study
Guide for this learning module.
The
Objectives of this learning module are to:
-
understand the basic concepts
of mutlimedia
-
distinguish how multimedia is
best used in Web development
-
identify
the development tools with which multimedia can be incorporated
into Web documents; we consider two categories:
-
the
most powerful tools
-
the
most cost effective tools
TPQ
1: Rewrite the preceding objectives in terms of personal accomplishments
to be attained after finishing the study of this learning module.
This
LM follows the sequence of chapthers in Niederst,
Web Design in a Nutshell, but (1) presents
only content relevant to the preceding objectives and (2) presents the
subject mater from a different viewpoint in order to give you a sterioscopic
view of the content which, hopefully, promotes understanding. The
sequence of presentations in this learning module is as follows.
You can click on any link to jump directly to that section.
-
GRAPHIC IMAGES ON THE WEB
-
GIFs
-
Animated GIFs
-
JPEG
-
PNG
-
AUDIO ON THE WEB
-
VIDEO ON THE WEB
1.
GRAPHIC IMAGES ON THE WEB:
-
Web graphics are electronic
images that can have one of two forms, vector graphics or bit
map (1) graphics (also called raster graphics). See COSC
120 LM VI, 3.2 Digitized Graphics.)
-
A bit map graphic specifies
the properties of every pixel (picture element) of a graphic. However,
a bit map graphic does not contain complete specifications of each pixel
in a graphic. It is only necessary to distinguish the differences
between adjacent pixels, e.g. each new color in a horizontal sequence
of pixels. Therefore, GIFs are best suited for graphics containing large
areas of the same color; this is a significant contrast to the JPEG
graphic format which is more suited pictures, such as photographs with
subtle changes of color.
-
Because
a bit map uses a fixed or raster method of specifying an image, a
bit map graphic cannot be rescaled by a user
without losing definition.
-
GIF (section
1.1) and JPEG (section 1.2) are examples of
files types based on bit map graphics.
-
A vector graphic (sometimes
called an object oriented graphic) is an image that results from the execution
of a mathematical instruction which continuously "draws" the image (e.g.
a square or circle), continuously, on a computer screen.
-
Because
the mathematical algorithm is independent of its display, a vector graphic
can be easily rescaled by a developer without losing definition.
-
Typically, an image is created
using vector graphics and then, when the artist is satisifed with the image,
it is converted to (or saved as) a bit map because they are more standardized
and, thus, easier to display without plug-ins.
-
Vector graphic files are significantly
smaller than equivalent bit map graphic files, but are more limited
it what they can display.
-
Macromedia's Flash technology
is based on vector graphics. (See section 4,
below.)
-
Imaging is the capture,
storage, manipulation, and display of images.
-
In document imaging,
the emphasis is on capturing, storing, and retrieving information from
the images (which are often mainly images of text).
-
In graphical imaging,
the emphasis is on the manipulation of created images in order to achieve
special effects through rotating, stretching, blurring, resizing, twirling,
and other changes to the original image.
-
Links
to reviews
and comparisons of Web graphics utilities.
SAQ
1: If they can effectively display the desired image, why would vector
graphics (e.g. Flash pages) be preferable to bit map graphics?
1.1
GIF Format (
See
Niederst, Chap. 14 .):
(Pink text is derived,
primarily, are from WhatIs.com.):
-
The GIF
is a de facto standard for 2D bit
mapped (2) graphics files
(specified by the MIME (3)
extension .gif); it is characterised by its eight-bit indexed
color format and LZW compression algorithm. TheLZW
compression algorithm is copyrighted by Unisys,
and companies that make products that exploit the algorithm (including
the GIF format) need to license its use from Unisys.
-
The GIF format was
patented by Compuserve (now owned by America Online), and its usage in
graphic software should be liscenced. Web users can make, view, and
send GIF files freely but they can't develop software that builds them
without an arrangement with Compuserve.
-
In practice,
Unisys has not required users of GIF images to obtain a license, although
their licensing statement indicates that it is a requirement. Unisys says
that getting a license from them does not necessarily involve a fee.
-
The GIF
standard has two forms; GIF89a, which replaced GIF87a in 1989, made
it possible to create:
-
animated
images
-
transparent
images, and
-
interlaced
graphics.
-
Eight-bit
indexed color....
-
LZW
compression reduces file sizes by using a table-based lookup algorithm
developed by Abraham Lempel, Terry Welch, and Jacob Ziv.GIF and
TIFF are two popular graphic file formats that are based on LZW
compression.
-
LZW is
a lossless (4)
compression technique meaning no imaged data is discarded during the compression
thus the decompressed image is identical to the original.
-
A particular
LZW compression algorithm takes each input sequence of bits of a given
length (for example, 12 bits) and creates an entry in a table (sometimes
called a "dictionary" or "codebook") for that particular bit pattern, consisting
of the pattern itself and a shorter code. As input is read, any pattern
that has been read before results in the substitution of the shorter code,
effectively compressing the total amount of input to something smaller.
Unlike earlier approaches, known as LZ77 and LZ78, the LZW algorithm does
include the look-up table of codes as part of the compressed file. The
decoding program that uncompresses the file is able to build the table
itself by using the algorithm as it processes the encoded input.
-
LZW is
suitable for compressing text files as well as graphic
(5) files.
-
The GIF89a
specification makes it possible to create
interlaced GIFs.
Interlacing is an technique that displays
bitmap data in a non-sequential order that allows the full image to be
initially rendered in low resolution before providing progressively greater
resolution until the image is complete. This contrasts with sequential
order in which an image is rendered line by line from top to bottom in
full resolution.
-
Interlacing is useful on low bandwidth connections because
a graphic can be shown initially as a whole, low-resolution image that
increases in resolution as more of the file is received. Although
the rendering of the image is not faster, it gives that impression,and
the viewer can often derive enough information from a low resolution form
to click on a link to save time.
-
Users
with high bandwidth connections will notice little difference in the display
of an interlaced GIF and that of a non-interlaced GIF.
-
When downloaded,
an interlaced GIF appears on a monitor like a pictureviewed
through a slowly-opening Venetian blind. A fuzzy outline of an image is
gradually replaced by seven successive waves of bit streams that
fill in the missing lines until the image arrives at its full resolution.
-
(From
FOLDOC) In an interlaced GIF89 image, the pixels in a row are stored sequentially
but the rows are stored in interlaced order, e.g. 0, 8, 4, 12, 2, 6, 8,
10, 14, 1, 3, 5, 7, 9, 11, 13, 15. Each vertical scan adds rows in the
middle of the gaps left by the previous one.
-
The GIF89a specification also
allows one of the colors of an image to be designated as transparent,
typically to allow the background color or other image of the underlying
page to show through. This feature can also be exploited to create
composite images by superimposing several GIF images.
-
Niederst
discusses
three important techniques for dealing with transparent GIFs:
-
preventing "halos" caused
by the anti-aliasing where the boundary of a color with the transparent
color becomes semitransparent.
-
preventing unwanted transparency
within an image, and
-
editing transparent areas
of an image.
-
GIF development tools...
-
General Image editing Applications:
-
Adobe
Photoshop is the standard by which all other graphics development
tools are evaluated.
-
Paint
Shop Pro is a cost effective alternative to Photoshop.
-
Web-specific graphics applications:
-
Macromedia
Fireworks is specifically designed to allow the developer to "design
and optimize Web graphics for easy integration into their HTML pages".
It combines both a vector drawing tool and a bitmap editing program that
complement each other; this makes it possible to rapidly develop vector
graphics and then convert them to bit map images. See the review
in PC Magazine which says "Fireworks 1.0's ability to create JavaScript
rollovers, sliced images, image maps, GIF animations, and optimized JPEG
and GIF files earned it an Editors' Choice award in our Web graphics roundup
("Web Graphics," November 3, 1998)."
-
Adobe ImageReady
is a component of Photoshop and is no longer sold separately.
It complements Photoshop by offering a full set of image editing tools,
along with tools for viewing browser dithering and correcting for screen
brightness errors. There are file compression tools that make it easy to
view and obtain the best-looking graphic at the smallest possible file
size. The color palette management functions let you view, edit and manage
image colors for optimal on-screen display. The animation palette lets
you create or change animated GIFs. Image maps can also be created. There
is also a full range of automation and batch processing tools.
-
Other applications with
GIF generation capabilities:
-
When a Microsoft Word 2000
document is saved in an HTML format, it automatically saves graphics, drawn
using its graphics tools, as separate GIF files. Thus it offers a
simple, familiar, but effective tool for creating schematic GIFs.
-
Shareware utilities include
GIF
Construction Set, recommended on ZDTV and Unlead
GIF Animator. (
Note: I could find neither GifConverter nor GifSmartsaver
, mentioned in our text, on download.cnet.com
nor ZDNET!)
-
A public
domain alternative to GIF, the PNG format (See section
1.4, below.), has
been developed by an Internet committee to avoid copyright problems with
Unisys
(6), but to date, has not tried to
inforce any liscencing requirements on users of the GIF format.
1.2
Animated GIFs (
See
Niederst, Chap. 18 .):
-
The GIF89a
is currently the only file format that can contain animated graphics.
-
An animated
GIF is a file that encapsulates
a short sequence of images (called
"frames") each with a GIF89a format.
-
Animated
GIFs are ideal for simple, single image, fixed location animations,
e.g. animated icons, banners, etv.
-
More
sophisticated Web animations can be achieved using Java Applets, JavaScripts,
Shockwave, Flash, etc. However for simple animations, GIF89a
images are easier to create, handled uniformly by virutally all browsers,
take up less memory, and require fewer computer resources than these other
techniques. On the other hand, GIF animation does not provide the same
degree of dynamic control nor animation complexity as other animation formats
-
There
is no unique file extension that distinguishes an animated GIF;
they are all .gif (7)
like regular GIFs.
Personally,
I like to put a suffix "Ani" on my animated GIFs, thus an animated book
GIF might have a name bookAni.gif. Using a suffix to identify these
files (rather than a prefix allows graphics with similar themes to be grouped
together by a file system, e.g. book.gif and bookAni.gif would be adjacent;
obviously if a developer wanted to group graphic files according to whether
they are animated or static would be accomplished by using a prefix, e.g.
aniBook.gif.
-
An animated
GIF can loop continuously (thus causing it to appear as though the
page download to be never ending!),
or
it can present a specified number of repetitions before terminating,
leaving the last image which remains stationary.
-
Some
(earlier) browsers do not support animated GIFs; however, in such cases,
the first frame is always shown as a static image.
-
(FOLDOC)
One problem with this format is the size of the files produced, as they
are by definition a sequence of individual images. Apart from minimising
the number of frames, the best way to decrease file size is to assist the
LZW
(8) compression by using blocks of
solid colour, avoid dithering, and use fewer colours. If areas of an image
don't change from one frame to another, the
compression avoids the need to reproduce the images.
-
There
are several graphic utilities with which a developer can create
animated GIFs.
-
The typical
utility allows a set of GIF files to be individually edited and and then
sequenced.
-
Other
approaches allow animated GIFs to be automatically generated from a text
fragment or a single image.
-
A comprehensive
list of animated GIF tools can be found at: http://animation.about.com/compute/animation/msubgif.htm
-
Recommended
references:
-
A helpful
collection of articles on animations can be found in About.com's Web
pages on animation, e.g.
-
"How
to" articles
-
Animated
GIF showcase
-
1.3
JPEG Format (
See
Niederst, Chap. 17.):
-
A JPEG
(pronounced JAY-PEG) is is the current standard file format used for photographs
(9) and other illustrations with
subtle gradations, minimal details, and few well defined edges.
JPEG files usually with the file suffix of ".jpg" or ".jpeg", or (in the
near future) ".JP2".
-
The platform
independent JPEG standard is essentially for controlling the size of
the file using a suite of lossy compression algorithms. This allows
the developer
to optimize the quality of the image (versus its file
size) for the desired display. Obviously the highest quality requires
the largest file, so there is always a trade-off between image quality
and file size.
-
The lossy
(10) compression technology allows the Web developer to balance
file size against image quality by adjusting the compression.
-
"JPEGs"
must
be decompressed before they can be displayed by a browser so
they
take longer to decode and display than GIF
or PNG (11).
-
The quality
of a JPEG image is designated by its "Q" setting. Q setting
is an arbitrary number with no particular mathematical significance,
and, unfortunately, the scales for specifying Q setting qualities vary
among the applications that produce JPEGs, e.g. Adobe products use
a 0-10 compression scale while Paint Shop Pro uses the more standard 1-
100 scale.
-
JPEG images
are specified by 24-bit RGB color or grayscale, but unlike GIFs do not
use palettes for referencing color details. One disadvantage of the
24-bit format is that on 8-bit displays dithering can occur.
-
The
current JPEG file format specifcations will be updated to JPEG2000
with the extension .JP2 this fall.
-
"JPEGs"
are created by choosing from a range of compression ratios.
-
The JPEG
scheme includes 29 distinct coding processes although a JPEG implementor
may not use them all.
-
Progressive
JPEG is a file format that is similar to an interlaced GIF.
These may be created byusing the JPEG compression algorithms to cause the
graphic to "fade in" with increasing detail until it appears at maximum
resolution. Although the final picture appears no sooner that a regular
JPEG, the it is a more appealing approach to the user, especially at low
bandwidths. In high speed downloads, the difference between progressive
JPEG and regular JPEGs are no really noticable.
-
The
JPEG
image compression Frequently Asked Questions provides much more information.
1.4
PNG Format (
See
Niederst, Chap. 16.):
-
PNG is a public domain graphic file
format that was developed by an Internet committee expressly to be
patent-free. In fact, it was designed, in 1995, to replace Unisis's
proprietary GIF specification, when Unisis threatened to charge licensing
fees for the use of GIFs. Since it was developed after GIF, hinsight
has provided several improvements on the GIF specification; see the comparison
of PNG and GIF in section E, below.
-
The most significant features of the PNG format include
the following.
-
PNG supports a wide variety of colors, from
the 8-bit palette and gray-scale formats provided by the GIF up to 48-bit
true color.
-
1-, 2-, 4- and 8-bit indexed color (palette) support
-
1-, 2-, 4-, 8- and 16-bit grayscale support
-
8- and 16-bit-per-sample truecolor support (RGB)
that provides 24-bit and 48-bit resolutions.
-
PNG, like GIF, has a lossless compression
algorithm; however, PNG is more efficient in compressing indexed color
images. According the Niederst, PNG's compression algorithm cand
compress an image "5-25% better than GIF".
-
PNG compression involves selectable filters,
but, in practice only two are used:
-
no filtering for indexed-color images and
-
adaptive filtering for everything else. From
the developer point of view, this method provides the simplest and most
efficient filtering because the algorithm tries all five filters to each
row before selecting the best filtering for that row.
-
The degree of transparency (also called "opacity")
can be controlled. PNG has two types of transparency control:
-
binary transparency, like GIF (except including
grayscale and RGB modes, not just palette-based)
-
alpha transparency (256 or 65536 levels of
partial transparency), like TIFF
-
alpha-palette transparency (that is, palette
has RGBA entries, not just RGB), "unlike almost anything else on the planet
except Targa/TGA"
-
2D Interlacing, similar to progressive JPEG,
of the image is supported and is faster in developing than in the GIF format.
PNG interlaces both horizontally and vertically using the "Adam7" method,
a seven pass process named after Adam M. Costello.
A comparison of interlacing is illustrated at http://www.cdrom.com/pub/png/pngintro.html.
-
Gamma correction allows you to "tune" the
image in terms of color brightness required by specific display manufacturers.
(From FOLDOC) "Adjustments applied during
the display of a digital representation of colour on a screen in order
to compensate for the fact that the Cathode Ray Tubes used in computer
monitors (and televisions) produce a light intensity which is not proportional
to the input voltage. The light intensity is actually proportional to the
input voltage raised to the inverse power of some constant, called gamma.
Its value varies from one display to another, but is usually around 2.5.
Because it is more intuitive for the colour components (red, green and
blue) to be varied linearly in the computer, the actual voltages sent to
the monitor by the display hardware must be adjusted in order to make the
colour component intensity on the screen proportional to the value stored
in the computer's display memory. This process is most easily achieved
by a dedicated module in the display hardware which simply scales the outputs
of the display memory before sending them to the digital-to-analogue converters."
-
A PNG file can not contain multiple images, therefore,
unlike GIF89a, PNG does not support animated graphics.
However the PNG specification is "extensible" so variations of
PNG can be developed that contain multiple,
scriptable images. A
closely related format called MNG (Multiple-image Network Graphics) is
explained at http://www.cdrom.com/pub/mng/.
-
Comparison of PNG and GIF:
-
Advantages of GIFs:
-
The GIF89a supports intrinsic simple animation, something that no
other common file format does.
-
GIFs are universally supported by browsers so they are widely used.
PNG is now supported by all modern browsers; however, it is not as popular
as GIF. This is changing.
-
Advantages of PNGs:
-
support for higher resolution images (16-bit grayscale and up to 48-bit
true color)
-
more efficient compression
-
more sophisticated interlacing
-
variable transparency (8-bit and 16-bit shades)
-
brightness control that is platform independent
-
public domain
-
Recommended references:
-
The PNG Home Page is http://www.cdrom.com/pub/png/,
gives the details of the PNG specification as well as its browser support.
-
A nice concise elaboration, "for non-technical users",
of the concepts mentioned above can be found at http://www.cdrom.com/pub/png/pngintro.html.
-
The W3C resource page for PNG is http://www.w3.org/Graphics/PNG/.
-
Browser support is listed at http://www.cdrom.com/pub/png/pngapbr.html.
1.5
Graphic Design with the Web Palette(
See
Niederst, Chap. 17.):
Since we are not concerned with dithering
or how graphics appear on 8-bit monitors we will skip this chapter.
2.
AUDIO ON THE WEB (
See
Niederst, Chap. 19.):
The ability to convert
analog signals to digital data has made it possible to record sound
waves, convert them to digital equivalent and save them as audio files
for a computer. Since data files are characteristic of the particular
application that created them, its not surprising that there are several
different audio file formats. However, to be embedded with Web
pages the file format must be one of the MIME types (See LM
I, section.) Like all multimedia files, audio files are
very large (compared to text files or HTML files) so when they are
used in Web pages compression is an important issue. Also,
because audio files (and video files) are dynamic, streaming technology
is essential for their output. Although audio has fundamental features
that are generic, unfortunately, the different computer platforms do
not have the same basic audio facilities. Consequently creating
and editing audio files is platform specific, so we will not go into much
detail on this other than to say that QuickTime, from Apple, is clearly
the standard; fortunately it is public domain and is available for both
Macs and PCs.
In
concert with Niederst, we are only concerned with audio theory and file
formats here; tutorials on adding video to your Web site may be found at
WebMonkey,
How
To, Audio/MP3 and ZDNET's Web
Workshop, Add
Sound to your Web site.
2.1 Basic Digital Audio
Concepts:
-
Encoding is the term used to describe the analog to
digital (AD) conversion so it applies to the creation of digital audio
files. In general, encoding and decoding (involved in the playback)
is performed by a codec (coder/decoder),
-
Waveform audio is the
digital representation of a sound, which can be stored, processed, and
transmitted by computer. When sound is digitally recorded, a technique
called digital sampling is used in which samples of the analog waveform
are collected at periodic intervals and stored as binary data. This
effectively converts the smooth analog signal into a series of histograms
of digital data. (See COSC
120, LM V, Figure HM-2). Waveforms can be used to record
music, voice, or sounds. They have MIME extensions .au, .aiff, .wav, .mid
(for MIDI), etc.
-
The sampling rate, specifies
the "time resolution" of an analog signal. It is the number
of samples taken per second, is typically measure inkilohertz (KHz).
This sampling rate is analagous to resolution in graphics in that the higher
the sampling rate (time resolution) the more accurately the digital
data represents the analog original. CD quality audio has a sampling
rate of 44.1 KHz whereas low quality sampling used in AM radio has 8 KHz.
-
Bit depth, specifies
the "amplitude resolution" of an analog signal. It is
the number of bits that are used to represent the amplitude of the analog
signal, e.g. low quality 8-bit resolution (that used in COSC
120, LM V, Figure HM-2) has only 256 "steps" to represent
the entire range of amplitudes of an analog signal. 16-bit depth
is required for CD quality. Bit depth in audio has a meaning analagous
to the same term for a graphics file, the more bits used to represent the
analog data, the higher the quality of the digital data.
-
In general telecommunications
theory, a channel is a distinct pathway through which a communications
signal can flow. Audio files can supply 1-6 separate audio channels,
the most familiar of which are one (mono), two (stereo), and six (suround
sound).
-
Audio compression is a reversable process that reduces
the size of a digital audio file using specialized audio compression
algorithm and restores the file when it is played. In networked
systems such compression reduces the required bandwidth, thus increasing
transmission efficiency. For example, MPEG (See section , below.)
uses lossy compression (stripping out sounds that are not discernible
to the human ear) to achieve compression ratios for 4:1 to 12:1,
while maintaining near-original sound quality." (See the general
discussion of compression in LM
I, seciton 4.3.D.)
2.2 Static (Nonstreaming)
Audio:
-
Static multimedia files (both audio and video) must be
completely downloaded before they can be played. (Contrast these with
streaming files in section 2.3, below.)
-
When compared to streaming technology, static files
-
have the advantage of simplicity. They are easy
to create and require no specialized server software to play them.
They are simply dowloaded, via FTP, and played by the browser or a plug-in.
-
have the disadvantage that the entire file to download
before it can be played.
-
2.3 Streaming Audio (
4/16):
-
Streaming audio is sound that is compressed for network transmission
and played as it arrives at a computer. Typically, there is
a slight initial delay because the incoming sound data has to fill up a
local
buffer before that buffer data is output via a "player". Then
the
-
Streaming audio, via browser, is normally provoded by a plug-in
player, a special program, designed specifically for the particular
audio file type, that contains a codec that decompresses the audio file
which is then played through the system speakers. The
plug-in can be either an integral part of a browser or downloaded
from the software maker's Web site. The player interface typically provides
an console that allows control over volumn, starting, stopping,
pausing, replay, etc.
-
Streaming audio most often involves prerecorded sound files,
but it can also be used to produce a live broadcast. This
requires special Web server software capable of multicasting, the
simultaneous transmission of a single file to multiple listeners.
-
Streaming audio technology is basicly the same as that
for streaming video; if fact treaming video incorporates streaming
audio as its sound track. This is discussed in section 3.3,
below, and illustrated in the Figure
HM-5, Streaming Technology from COSC 120 (which is more appropriately
associated with streaming video).
-
The most popular technologies
for streaming audio is provided by RealAudio
from Progressive Networks and Shockwave
from Macromedia (designed for animations but often used for stand-alone
audio).
3. VIDEO ON THE
WEB (
See
Niederst,
Chap. 20.):
Video, like
audio, is fundamentally an analog signal, so the basic concepts of
AD to conversion, sampling, and streaming (discussed int in section 2)
also apply to video on the Web. In concert with Niederst, we are
only concerned with video theory and file formats here; tutorials about
adding video to your Web site may be found at WebMonkey,
How
To, Video and ZDNET's Web
Workshop,
Add
Video to your Web site.
3.1 Basic Digital Video Concepts:
Not surprisingly the important video concepts are all concerned with
the balance between video quality and file size, because the inherently
large video files severly limit all of the following parameters.
Most of these parameters are all inversely proportional to the download
time so they need to be optimized for the available bandwidth.
-
Movie Length is currently limited to a few minutes.
Streaming technology is the best solution to this problem.
-
Frame size, measured in pixels, determines the size
of the monitor window in which a video is displayed. The most common
current frame size for Web video is 160x120 pixels, but 320x240 is recommended
by Niederst.
-
Frame rate is the number of video images that are
displayed per second. It is used to synchronize the video images
with their associated sound track.
-
In motion pictures and television, the frame rates are standardized
by the Society of Motion Picture and Television Editors (SMPTE). The current
frame rates for motion pictures is 24 frames per second and 30 frames per
second for television in the U.S. On the Web, frame rates of 10-15
produce acceptable videos, but even lower rates are typical, especially
over modem connections.
-
Because compression produces smaller files, it high compression
ratios produce higher frame rates and, consequently, smoother motion.
-
Because compression reduces image quality, a balance between
frame rate and quality produces the best videos.
-
Image quality is an umbrella term for the color accuracy
and sharpness of a photographic image. It depends mainly on the
level of compression used for the transmission of the image.
As mentioned above the best videos for a given bandwidth are produced by
balancing frame rate and image quality.
-
Color bit depth, as with static images, governs the
color accuracy of a video. However, this is probably the biggest
"bandwidth hog", so minimizing color bit depth is a primary technique
for producing acceptable videos, so for low bandwidth connections 8-bit
color is prefered.
-
Data rate (bit rate) is the rate required for smooth,
uninterruped playback of video transmitted over a network. It is
defined as (file size)/(movie length in sec) and has units of kbps.
For streaming media, the data rate is more significant than the file size.
-
Video compression has special characteristics that
make it more complex that other types of compression. There are two
distinct types of compression:
-
Spatial (or intraframe) compression reduces the
number of pixels of each individual frame just as in static photographic
compression.
-
Temporal (or interframe) compression is applied over
time, reducing the number of pixels in a sequence of similar frames.
It avoids the retransmission of pixels whose properties do not change over
adjacent frames, e.g. static backgrounds. Temporal compression is
based on "key frames" placed at strategic positions throughout a
frame sequence. "Delta frames" (a term lifted from mathematics)
follow a key frame and pixels that are the same as the key frame are eleminated
before transmission. Niederst recommends that a key frame be used
every second in a Web video.
-
There are several video codecs, the most popular of
which are:
-
Cinepak the current standard...
-
Sorenson, the probable new standard (replacing Cinepack)...
-
MGEP
3.2 Video File Formats:
-
Quicktime Movie (.mov)
is
Apple's development, storage, and playback technology for brief multimedia
sequences. Quicktime files (designated with the MIME extensions:
.mov, .moov, and .qt) combine text, audio,
and video in a single file. If the technology is not built
into that browser a Quicktime plug-in can be installed to view Quicktime
movies.
-
AVI (Audio/Video Interleaved; .avi)
is
a Microsoft Windows video format that interleaves standard waveform
audio (11,025Hz, 8-bit samples) and bitmap video frames to produce animation
at 15 fps in 160x120x8 resolution.
-
MPEG (Moving Picture
Experts Group), part of the Internation standards Organization (ISO), evolves
standards for digital video and digital audio compression.
It controls a the video image format which bears
its name and has the MIME extension .mpg or .mpeg. MPEG is a "lossy"
compression technique, meaning that some of the detail of the original
image is lost when it is redisplayed.
-
MPEG-1,
used in CD-ROMs and Video CDs, provides a
resolution of 352x240 at 30 fps with 24-bit color and CD-quality sound.
It
also contains as a subset the popular audio standard MP3, more accurately
named MPEG-1 Audio Layer-3; this can be used on its own for pure sound
files. (See section 3.1.C, above.)
-
MPEG-2
is a broadcast-quality standard that provides better resolution than VHS
tapes; it is used in DVD movies.
-
An MPEG-3
specification was under development but was combined with MPEG-2.
3.3 Streaming Video:
-
Streaming video is a sequence
of images that are compressed for network transmission and displayed, as
they arrive, by a viewer. Strictly speaking "streaming media" is
streaming video synchronized with streaming audio, but most people simply
call this streaming video which includes its native sound track.
-
As with streaming audio, streaming
video is designed to allow the video images and and synchronized sound
track to be played as they arrive by a viewer. See
the Figure
HM-5, Streaming Technology from COSC 120. There
is an initial delay required for the media to fill their buffers
after which the video and audio files are played back while the buffers
are simultaneously refilled. Like the streaming audio player, the
streaming video viewer is an application specifically programmed to handle
the particular file type. It decompresses the downloading file and
plays the sound track while rendering the image sequence on the monitor.
-
Video codecs, unlike
other codecs, decompress the video continuously thus allowing the browser
to display the video in real time.
-
Major streaming video and streaming media technologies
include RealSystem G2 from RealNetwork, Microsoft Windows Media Technologies
(including its NetShow Services and Theater Server), and VDO. Microsoft's
approach uses the standard MPEG-4 compression algorithm for video. The
other approaches use proprietary algorithms. (The program that does the
compression and decompression is sometimes called the codec.) Microsoft's
technology offers streaming audio at up to 96 Kbps and streaming video
at up to 8 Mbps (for the NetShow Theater Server). However, for most Web
users, the streaming video will be limited to the data rates of the connection
(for example, up to 128 Kbps with an ISDN connection). Microsoft's streaming
media files are in its Advanced Streaming Format (ASF).
3.4 Adding Video to an HTML Document:
4. FLASH:
-
Flash is a platform independent graphics
animation technology from Macromedia Inc. for
producing high-impact, vector graphics based Web sites. Because
vector graphics requires much smaller files than bit-mapped graphics, Flash
minimizes the bandwidth required for sophisticated animations which
gives it a significant advantage over bit-mapped animation technologies.
-
The display of a Flash animation in a browser requires
a plug-in which can be downloaded free from Macromedia.
-
Integration between Dreamweaver and
Flash enables users to easily integrate vector animations, MP3 audio, and
interactivity to produce high-impact, engaging Web applications.
-
Developers can use Macromedia Flash authoring software
to create their own animations or import other vector-based images.
-
A fully functional 30-day trial version of Flash can be downloaded
from http://www.macromedia.com/software/flash/
or installed from the Dreamweaver CD.
-
For a thorough comparison of the advantages and disadvantages
of Flash see
Niederst,
pp. 361-363.
-
Further information about Flash and links to other Web resources
can be found at:
http://www.macromedia.com/software/flash/productinfo/
5. SHOCKWAVE
(from Webopedia):
-
Shockwave is a technology developed by Macromedia,
Inc. that enables Web pages to include multimedia objects. To
create a shockwave object, you use Macromedia's multimedia authoring
tool called
Director, and then compress the object with
a program called Afterburner.
You then insert a reference
to the "shocked" file in your Web page.
-
To see a Shockwave object, you need the Shockwave
plug-in, a program that integrates seamlessly with your Web browser;
it also allows files created by other Macromedia applications (Authorware,
Director and Freehand) to be viewed by a browser.
The plug-in is freely available from Macromedia's Web site as either a
Netscape Navigator plug-in or an ActiveX control.
-
Shockwave supports audio, animation, video and even
processes
user actions such as mouse clicks. It runs on all Windows platforms as
well as the Macintosh.
-
You can easily integrate Shockwave content into your Web applications with
Macromedia Director. Director is the market-leading multimedia solution
for creating engaging, rich media corporate presentations, e-merchandising
applications, and entertainment. Director combines graphics, sound, animation,
text, and video to create streaming, multiuser, interactive Web content.
A fully functional 30-day trial version of Director can be installed from
the Dreamweaver CD or downloaded from: http://www.macromedia.com/director/
-
For a thorough comparison of the advantages and disadvantages
of Flash see
Niederst,
pp. 366-367.