Incorporate Graphics manipulation from Neiderst, Chap 9, pp157+
?? Incorporate VRML??

alert_red.gifDrafted: 3/25/0010/22/01alert_red.gif
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:

  1. understand the basic concepts of mutlimedia
  2. distinguish how multimedia is best used in Web development
  3. identify the development tools with which multimedia can be incorporated into Web documents; we consider two categories:
    1. the most powerful tools
    2. 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.

  1. GRAPHIC IMAGES ON THE WEB
    1. GIFs
    2. Animated GIFs
    3. JPEG
    4. PNG
  2. AUDIO ON THE WEB
  3. VIDEO ON THE WEB
1. GRAPHIC IMAGES ON THE WEB:
 
  1. 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.)
    1. 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.
      1. 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.
      2. GIF (section 1.1) and JPEG (section 1.2) are examples of files types based on bit map graphics.
    2. 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.
      1. Because the mathematical algorithm is independent of its display, a vector graphic can be easily rescaled by a developer without losing definition.
      2. 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.
      3. Vector graphic files are significantly smaller than equivalent bit map graphic files, but are more limited it what they can display.
      4. Macromedia's Flash technology is based on vector graphics.  (See section 4, below.)
  2. Imaging is the capture, storage, manipulation, and display of images.
    1. In document imaging, the emphasis is on capturing, storing, and retrieving information from the images (which are often mainly images of text).
    2. 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.
  3. 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.):

  1. 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.
    1. 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.
    2. 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.
  2. The GIF standard has two forms; GIF89a, which replaced GIF87a in 1989, made it possible to create:
    1. animated images
    2. transparent images, and
    3. interlaced graphics.
  3. Eight-bit indexed color....
  4. 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.
    1. 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.
    2. 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.
    3. LZW is suitable for compressing text files as well as graphic (5) files.
  5. 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.
    1. 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.
    2. Users with high bandwidth connections will notice little difference in the display of an interlaced GIF and that of a non-interlaced GIF.
    3. 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.
    4. (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.
  6. 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.
    1. Niederst discusses three important techniques for dealing with transparent GIFs:
      1. preventing "halos" caused by the anti-aliasing where the boundary of a color with the transparent color becomes semitransparent.
      2. preventing unwanted transparency within an image, and
      3. editing transparent areas of an image.
  7. GIF development tools...
    1. General Image editing Applications:
      1. Adobe Photoshop is the standard by which all other graphics development tools are evaluated.
      2. Paint Shop Pro is a cost effective alternative to Photoshop.
    2. Web-specific graphics applications:
      1. 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)."
      2. 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.
    3. Other applications with GIF generation capabilities:
      1. 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.
      2. 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!)
  8. 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 .):

  1. The GIF89a is currently the only file format that can contain animated graphics.
  2. An animated GIF is a file that encapsulates a short sequence of images (called "frames") each with a GIF89a format.
    1. Animated GIFs are ideal for simple, single image, fixed location animations,  e.g. animated icons, banners, etv.
    2. 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
  3. 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.
  4. 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.
  5. Some (earlier) browsers do not support animated GIFs; however, in such cases, the first frame is always shown as a static image.
  6. (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.
  7. There are several graphic utilities with which a developer can create animated GIFs.
    1. The typical utility allows a set of GIF files to be individually edited and and then sequenced.
    2. Other approaches allow animated GIFs to be automatically generated from a text fragment or a single image.
    3. A comprehensive list of animated GIF tools can be found at: http://animation.about.com/compute/animation/msubgif.htm
  8. Recommended references:
    1. A helpful collection of articles on animations can be found in About.com's Web pages on animation, e.g.
      1. "How to" articles
      2. Animated GIF showcase
1.3 JPEG Format ( See Niederst, Chap. 17.):
 
  1. 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".
    1. 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.
    2. The lossy (10) compression technology allows the Web developer to balance file size against image quality by adjusting the compression.
    3. "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).
    4. 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.
    5. 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.
    6. The current JPEG file format specifcations will be updated to JPEG2000 with the extension .JP2 this fall.
  2. "JPEGs" are created by choosing from a range of compression ratios.
  3. The JPEG scheme includes 29 distinct coding processes although a JPEG implementor may not use them all.
  4. 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.
  5. The JPEG image compression Frequently Asked Questions provides much more information.
1.4 PNG Format ( See Niederst, Chap. 16.):
  1. 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.
  2. The most significant features of the PNG format include the following.
    1. 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. 1-, 2-, 4- and 8-bit indexed color (palette) support
      2. 1-, 2-, 4-, 8- and 16-bit grayscale support
      3. 8- and 16-bit-per-sample truecolor support (RGB) that provides 24-bit and 48-bit resolutions.
    2. 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".
    3. PNG compression involves selectable filters, but, in practice only two are used:
      1. no filtering for indexed-color images and
      2. 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.
    4. The degree of transparency (also called "opacity") can be controlled.  PNG has two types of transparency control:
      1. binary transparency, like GIF (except including grayscale and RGB modes, not just palette-based)
      2. alpha transparency (256 or 65536 levels of partial transparency), like TIFF
      3. alpha-palette transparency (that is, palette has RGBA entries, not just RGB), "unlike almost anything else on the planet except Targa/TGA"
    5. 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.
    6. 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."
  3. 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/.
  4. Comparison of PNG and GIF:
    1. Advantages of GIFs:
      1. The GIF89a supports intrinsic simple animation, something that no other common file format does.
      2. 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.
    2. Advantages of PNGs:
      1. support for higher resolution images (16-bit grayscale and up to 48-bit true color)
      2. more efficient compression
      3. more sophisticated interlacing
      4. variable transparency (8-bit and 16-bit shades)
      5. brightness control that is platform independent
      6. public domain
  5. Recommended references:
    1. The PNG Home Page is http://www.cdrom.com/pub/png/, gives the details of the PNG specification as well as its browser support.
    2. 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.
    3. The W3C resource page for PNG is http://www.w3.org/Graphics/PNG/.
    4. 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:

  1. 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),
  2. 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.
    1. 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.
    2. 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.
  3. 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).
  4. 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:
  1. 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.)
  2. When compared to streaming technology, static files
    1. 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.
    2. have the disadvantage that the entire file to download before it can be played.
2.3 Streaming Audio (4/16):
  1. 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
  2. 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.
  3. 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.
  4. 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).
  5. 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.

  1. Movie Length is currently limited to a few minutes.  Streaming technology is the best solution to this problem.
  2. 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.
  3. 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.
    1. 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.
    2. Because compression produces smaller files, it high compression ratios produce higher frame rates and, consequently, smoother motion.
    3. Because compression reduces image quality, a balance between frame rate and quality produces the best videos.
  4. 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.
  5. 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.
  6. 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.
  7. Video compression has special characteristics that make it more complex that other types of compression.  There are two distinct types of compression:
    1. Spatial (or intraframe) compression reduces the number of pixels of each individual frame just as in static photographic compression.
    2. 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.
  8. There are several video codecs, the most popular of which are:
    1. Cinepak the current standard...
    2. Sorenson, the probable new standard (replacing Cinepack)...
    3. MGEP
3.2 Video File Formats:
  1. 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.
  2. 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.
  3. 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.
    1. 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.)
    2. MPEG-2 is a broadcast-quality standard that provides better resolution than VHS tapes; it is used in DVD movies.
    3. An MPEG-3 specification was under development but was combined with MPEG-2.
3.3 Streaming Video:
  1. 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.
  2. 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 viewerSee 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.
  3. Video codecs, unlike other codecs, decompress the video continuously thus allowing the browser to display the video in real time.
  4. 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:

  1. 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.
  2. The display of a Flash animation in a browser requires a plug-in which can be downloaded free from Macromedia.
  3. Integration between Dreamweaver and Flash enables users to easily integrate vector animations, MP3 audio, and interactivity to produce high-impact, engaging Web applications.
  4. Developers can use Macromedia Flash authoring software to create their own animations or import other vector-based images.
  5. 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.
  6. For a thorough comparison of the advantages and disadvantages of Flash see Niederst, pp. 361-363.
  7. 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):
  1. 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.
  2. 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.
  3. 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.
  4. 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/
  5. For a thorough comparison of the advantages and disadvantages of Flash see Niederst, pp. 366-367.