WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




All About Multimedia

All About Multimedia

What is 'multimedia'? what does the term most often refer to on the Web?
As the term implies, "multimedia" literally involves using more than one type of media--usually text, graphics, animation and sound--to produce an object. Traditional "static" Web pages, therefore, could be considered multimedia, since they usually incorporate both text and graphics. However, the term multimedia is most often used in Web parlance to refer to the inclusion of audio, video and/or animation in a Web page. Recently, the advent of new Web multimedia standards such as Shockwave and VRML have expanded the meaning of the term even further. In order to keep the scope manageable, this FAQ focuses primarily on audio and video. The topic of animation will be covered in a separate, upcoming FAQ in Web Developer's "Graphics and Design" section.

What are the most common audio and video file types on the Web? What are the pros and cons of each?
The most commonly used audio formats on the Web are the AU (Audio Format), WAV (Waveform Audio) and AIFF (Audio Interchange File Format) file types. In brief, the formats break down like this:

Common Audio Formats

Format Compression Ratio/
Avg. File Size
Pros Cons
AU 2:1
---
8 Kb/sec.
Relatively good compression and small file size; supported by most browsers Acceptable, not premium sound quality; 8-bit encoding only
WAV N/A
---
10 Mb/min.
Better sound quality than AU due to 16-bit capabilities; native support in Windows No compression and 16-bit mean big file size
AIFF Similar to WAV 8- or 16-bit sampling with WAV-comparable sound quality; native support on Mac Like WAV; therefore, AIFF and WAV commonly used only at low sampling rates and 8-bit encoding to keep files small

The most common video formats on the Web are QuickTime (MOV), MPEG (Moving Picture Expert Group), and AVI (Audio Video Interleave). A similar breakdown of these formats follows:

Common Video Formats

Format Compression Ratio/
Avg. File Size
Pros Cons More Info
QuickTime (MOV) Up to 50:1
---
4 MB/min.
High-quality Web standard; native support on Mac, QT plug-in for Windows Relatively large file size Apple's QuickTime site
MPEG Up to 200:1
---
2.8 Mb/min.
Great compression; can deliver full-motion video with relatively small file size Software-based decompression just becoming available to general public MPEG's site
AVI N/A
---
Somewhere between QT and MPEG
Native support on Windows Large files; often problems syncing audio with video Good question!

For a more in-depth analysis of the various audio and video formats, see the "Fun with Formats" section in Does Multimedia Have a Dark Side? and Putting Video on Your Web Site: The Basics.

What is 'streaming' audio and video? What are the most popular streaming formats?
Many of the newest multimedia formats employ a process called data streaming. This method of delivery allows users to play audio and video files before they are completely downloaded. Usually streaming works by downloading an initial portion of the file, known as a buffer, into the user's viewer or player. This application then begins playback of the file while the remainder continues to "fill in." The buffer, as the name suggests, allows for continuous playback of the audio or video by compensating for any delays in the transmission of the rest of the file--at least in theory.

Most of the streaming multimedia formats are proprietary, requiring special servers for encoding and transmission. Some of the most commonly used streaming audio formats are Progressive Networks' RealAudio (RA), and Xing Technology Corp's XingMPEG. More recently, Macromedia also made its voice heard in this market with the introduction of streaming audio for the popular Shockwave plug-in. The following table offers a quick glance at the specs on these file types:

Common Streaming Audio Formats

Format Compression Ratio/
Avg. File Size
Pros Cons More Info
RealAudio Compressions for both 14.4 & 28.8
---
3.6 - 8 Mb/hour
Over 5 million RA Players distributed Audio often "gaps out" on 14.4-28.8 modem connections RealAudio.com
XingMPEG Up to 26:1
---
Varies depending upon strength of compression
High compression ratios and good sound quality Player not as widely distributed Xingtech.com
Shockwave Up to 176:1
---
Varies depending on strength of compression
Widespread plug-in support; great compression and high quality audio at low baud rates (8 - 16 Kbps) Users must download new plug-in version Macromedia.com

The most common streaming video formats include XingMPEG video and VDOnet (VDO) file types. However, streaming video is a hot market, and the technology is advancing rapidly. Recently, a number of new streaming technologies and formats--primarily those designed to work within Netscape plug-ins--have entered the scene. These include Digigami's CineWeb, a non-proprietary codec that enables WAV, MPEG, AVI and QT streaming; and Vivo Software's VivoActive (.VIV) format, which compresses AVI video as much as 200:1. Other Netscape plug-ins, such as ClearFusion (aka CoolFusion), allow users to stream standard AVI and MPEG files automatically. So you might want to keep them in mind when choosing a format.

Common Streaming Video Formats

Format Delivery Rate/
Avg. File Size
Pros Cons More Info
XingMPEG 28.8: 2 frames per second
T1: full-motion video (30 fps)
---
3 Mb/min.
High compression ratios and good quality at 30 fps Player not as widely distributed; poor quality for modem users Xingtech.com
VDO 28.8: 8-12 fps
14.4: 2-3 fps
---
1 MB/min.
Over 1.5 million VDOLive Players distributed; higher rate of delivery for modem users Guess it could be even faster... VDOnet
CineWeb N/A Enables streaming of AVI, QT and MPEG video and WAV and MIDI audio; no conversion to proprietary format Digigami.com
VivoActive 28.8: 7.5 to 15 fps
ISDN/LAN: 15-30 fps
Compresses AVI files up to 200:1 Compresses AVI only, although more format support scheduled for near future Vivo.com

For a more in-depth analysis of the various audio and video streaming formats, see the "Fun with Formats" section in Web Developer®'s Does Multimedia Have a Dark Side?

How do I create my own audio and video files? What software is available to produce A/V for the Web?
For a great intro to producing video for the Web, check out Web Developer's Putting Video on Your Web Site: The Basics. This tutorial takes you through all the steps involved in Web video, from shooting and capturing the original source to linking the file to your Web page.

Basically, producing video for your Web page involves two steps: digitizing and editing. There are both hardware- and software-based solutions for digitizing. Hardware-based video capture boards, commonly used for MPEG and AVI video, are usually expensive (often $4,000 and up). For an extensive list of MPEG hardware companies, see MPEG.org's MPEG-related Boards and Systems Manufacturers and Visible Light's MPEG Products Mall. These two sites also provide links to a number of software-based encoders for video production, which are often less-expensive alternatives to hardware boards and systems. QuickTime video hardware, on the other hand, is usually much lessexpensive than similar products for MPEG and AVI. And many Macintosh systems have on-board A/V hardware already built in, so that all you have to do is plug in a video source. For more info on QuickTime video production, see Apple's Developer Info and the QuickTime FAQ, which also contains software and resources sections.

Where streaming video is concerned, most of the vendors listed in the table above provide specs and pricing info about their proprietary encoders on their Web sites.

Once the video file is digitized, it's time to edit. Some of the top names in this category are Adobe's Premiere and After Effects and Macromedia's Director. With the final product complete, the file can be uploaded to your server and linked from your Web site. For more on this final step, see How do I incorporate audio and video files into my Web pages?

Creating audio files for the Web is a process similar to producing video, except most audio formats do not require special hardware devices to capture the original source. Often the audio source can be saved directly into your authoring/editing program. Even better news, some of the best digital audio editors are shareware, including Adobe Audition and GoldWave for Microsoft Windows. For more sophisticated users, commercial products such as Macromedia's SoundEdit 16, digidesign's Pro Tools or Sonic Foundry's Sound Forge should do the trick.

Again, the streaming audio vendors' sites listed in the table above provide information about their proprietary audio encoders.

How do I incorporate audio and video files into my Web pages?

  • provide a text and/or graphic link to the file, usually including a "thumbnail" in the case of video
  • embed the files directly into the HTML document using the <EMBED> tag
  • use Netscape's client pull, which automatically downloads the file each time the page is accessed

Text and graphic links are still one of the most prevalent methods of adding A/V to a Web page. Out of courtesy to the viewer, it has become common protocol to include the name and type of the file along with the file size. This lets users know in advance if they have a compatible viewer and what kind of download time the file will require.

Embedding A/V files is a more seamless method of integration, the drawback being that it only works with Netscape plug-ins. The <EMBED> tag uses the same parameters as the <IMAGE> tag, including SRC, HEIGHT and WIDTH. Additional, plug-in specific parameters can also be used, so that a typical embed command line might look like this:

<EMBED SRC="MyMovie.mov", WIDTH=150, HEIGHT=250 CONTROLS=TRUE>

See Netscape's Embed Tag Syntax for more info on embedding.

The final option, client pull, is a less user-friendly alternative, primarily because it automatically downloads a specific file whether the viewer wants it or not. Client pull is achieved using a <META> tag line, such as:
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=myvideo.mov">< P> This command tells the user's browser to load a file (myvideo.mov) after an allotted amount of time has passed--in this case, 1 second, as specified in the CONTENT="1;" parameter. Another drawback of client pull is that the file will be reloaded each time the page is revisited, unless all the links from within the site refer to a version of the page without the client pull command. For more on client pull and its use in this manner, see Netscape's An Exploration of Dynamic Documents and Project Cool's Automatic Sound Files.

Sampling frequency? Frame rate? 16-bit? Can you help me out with some of this A/V jargon?
Lost in the maze of multimedia terms? Here's a quick reference guide to some of the most commonly used terms and acronyms:

  • 8-bit/16-bit -- the length of each chunk of data, often referred to as "word length," in a file; typically, the longer the word length, the greater the fidelity of the digital file to the analog source
  • AIFF -- (.aiff, .aifc) Audio Interchange File Format; developed by Apple Computer
  • AU -- (.au) Audio Format; first developed for the Unix platform, now one of the most common audio formats on the Web
  • AVI -- (.avi) Audio-Video Interleave; file type used by Video for Windows, so named because video and sound elements are stored in alternate, or interleaved chunks in the file
  • Bandwidth -- in relation to the Internet, bandwidth usually refers to the rate or amount of data that can be transferred from one point to another--usually between a Web server and an application such as a Web browser; because of their size, multimedia files often consume large amounts of available bandwidth
  • bps/Kbps -- bits per second/kilobits per second; common units of measurement for data transfer rates; a bit (short for binary digit) is the smallest unit of computer data--a 1 or a zero; a kilobit is 1,024 bits (2 to the 10th power)
  • Channels -- in relation to audio files, channels refer to the number of data streams that a file creates--typically one for monophonic sound and two for stereophonic sound
  • Codec -- compression/decompression algorithm; programs used to convert and compress analog A/V sources into digital files, then decompress them upon playback
  • Frame rate/fps -- the number of frames per second that a video file displays; full-motion video, like that used in television broadcasting, is 30 fps
  • MPEG -- Moving Pictures Experts Group; international standard for audio and video compression
  • Plug-in -- a program specifically written to run within a larger application and augment its performance; in relation to the Web, the term plug-in has almost become synonymous with Netscape's Navigator, as literally hundreds of them have been created for the popular browser
  • QuickTime movie -- (.mov) the most popular video format on the Web; originally developed by Apple Computer
  • Sampling frequency -- the number of times an audio file is quantitized, or sampled, in a given period of time; the highest pitch an audio file can produce is exactly half of the sampling rate, so higher frequencies produce better range and thus better quality audio; 22.050 KHz is a common sampling frequency for computer audio files
  • Streaming -- with multimedia, a process/technique whereby an application or plug-in can begin playing back the contents of a file before it is fully downloaded; typically, an app uses a stored, or buffered portion of the file while the remaining contents "fill in" behind it
  • WAV -- (.wav) pronounced "wave," WAV is the Windows standard for waveform audio files.
  • What are the 'downsides' to putting multimedia files on my Web page?
    Because audio and video files are usually large, adding these data types to your Web page or site can create two general problems: 1) they consume lots of storage space, typically a problem if you are leasing server space from an ISP or if you include a large number of files in your site; and 2) they consume lots of available bandwidth.

    Bandwidth consumption is a problem shared by those who lease server space as well as those who maintain their own server. If you are renting space, most ISPs only allow a certain amount of data--commonly 200-300 MB a day--to be transferred in a given period of time. A 2 MB QuickTime movie would only need 100 hits, therefore, to equal your daily quota. Bandwidth problems take on a whole different dimension if you run your own server. A server's connection to the Internet, often referred to as a "data pipe," can only handle so much data at once. This amount, typically equal to or less than the total capacity of the data pipe (e.g., 128 Kbps for an ISDN line, 1.56 Mbps for a T1 connection), is the server's available bandwidth. Because conventional multimedia files are transferred at as fast a rate as possible by the server (often called "bursty" transmission), they will consume as much of the available bandwidth as they can during transfer. And the files often take as much as 20-30 minutes to serve, so that both bandwidth and the server connection are tied up for the duration. Serve a large number of bulky mu ltimedia files, and both your server and your data pipe may quickly become "clogged."

    For a closer look at the server and bandwidth problems associated with multimedia, including a number of solutions for these downsides, see Does Multimedia Have a Dark Side? in the September/October issue of Web Developer.

    Sources and Resources for further multimedia exploration.






HTML5 Development Center


Recent Articles