29. Multimedia In Your Page

a. Animate my GIF!

An animated GIF image is just an extension of the same file format used for inline GIF images we saw in lesson 7. But rather than just showing one image, an animated GIF has layers of different images, and information in the file can control how long it waits before displaying the next image, and how many times to loop through the entire sequence.

Several current graphics programs should have options to create animated GIF files. Plus, you can find free or low cost shareware programs (e.g. http://shareware.com/) that can turn a series of images into a GIF animation. And since the web is fully of dancing, blinking, and moving GIFs, there are plenty of free clip-art sites where you can download animations to use for your own pages. We provide a list of links to these sites at the end of this lesson.

Another advantage of this media type is that the entire graphics file does not have to be downloaded before it starts to play; an animated GIF will commence as soon as enough information is downloaded to display the first "frame" of the animation. Therefore, it appears to "stream" the animation and you can create animation files that are several hundred k in size that may start playing when perhaps 20% of the file has been received be the viewer.

What are some down sides of animated GIFs? The primary one is that because the movement attracts your eye, they can be distracting to someone trying to comprehend the other information on the same page. The other disadvantage so that they generally tend to be used as a novelty, and after the first few times you see the same animated teddy bear. it can start to look cliché or juvenile.

Animations can be very useful to show time-ordered information, i.e. to show changes in a feature over time (e.g. erosion of a beach, growth of a plant, changes in stock market prices) or to demonstrate a process (e.g. how to change a tire, how blood moves through the heart). Like GIF images, the files are much smaller for graphics that have large continuous regions of solid color and sharp edges, as compared to images with more spatial variation such as photographs.

b. Movie Time

Blame it on television, Hollywood, MTV, etc, but we are a society tuned to video. And with the web, we can also include information in a video format.

But just be cause you can does not mean that you should. Why not? Very simply, video is a lot, a lot, of data to send across the internet, and likely your experiences to date are those "tiny" squares of herky jerky video segments where the voices seem horribly out of synch with the action. If you think about it, to make a "moving picture" means sending a lot of still images (like the frames of old movie film) to create the sense of movement, not to mention adding a layer of audio information.

So until high speed internet access is the norm (and it might be some day), we use technology to compensate via some clever techniques that "compress" video to make the file sizes smaller, and other techniques that allow the video information to "stream" to us (meaning we see content as it is sent, not having to wait for a large file to download.

We suggest you try to think about the use of video without comparing it to television or the movies. The worst uses are what we call "Talking heads", i.e. a person sitting still talking to you. The video adds very little, and as we see later, you can send the equivalent information using less bandwidth intensive media by combing still images and audio.

When might it be crucial to use video in your web page? Most likely will be to show something that is changes over time, like we saw in animation, but perhaps needs to have a more "real-world" look over as compared to graphics. Often it might be a historic event (the assassination of John F Kennedy). Video may be important to show us something that we cannot see easily because of location (landing on the Moon, the Mars rovers) or physical limitations/ safety considerations (deep ocean exploration, inside a nuclear reactor). Or video may be critical to demonstrating a procedure (surgery, welding a steel beam).

You can use a "digitized" movie simply to play back like video, non-stop, from start to finish. But you can also use a sliding "control" to quickly jump to any point in the movie sequence. This can allow you to explore "snapshots" of a time-based process.

Let's shift and talk about video technology. Traditionally, movies/films were recorded via a photographic process (think about movie reels) and played back through projector. To use video on a computer, all of the information must be digitized or turned into a data file, essentially a series of still images that when played back at an appropriate speed, looks to the human eye like actual motion. Generally, this is achieved when we see about 30 images every second (or "frames per second").

To create a video clip you must have some special computer hardware to take a video input (from a source such as a VCR, a television output, a video camera) to do the magic of making a video file. While several years ago this was considered high end equipment, there are many low end (i.e. cheap) tools to do this. You would also likely need some special software to edit video clips once they are on your computer, which again range from very cheap (simple) to expensive (complex, professional).

When we start talking about digital video, we enter a region of acronym soup for the various kinds of video files. Probably the most important and commonly used formats are Apple's QuickTime and Moving Picture Experts Group (MPEG). There are of course, many others, and we cannot really review all of them here. For more information visit the About.com guide to Desktop Video. For this tutorial, we will present the code to embed a QuickTime movie into your web page. While other video formats may used, such as MPEG, AVI, etc, QuickTime is the format to will be able to be used by the widest range of web browsers.

For more information on video, see the Web Developer's Virtual Library.

When the web first emerged, video clips were rarely used because, to watch them, you had to download the entire video file (which can be several megabytes for even short segments) before you could see anything. Later as web technology has evolved, solutions have emerged that allow video to be "streamed" to you, meaning when ask for video (clicking on a web page link), you will start to see the video information as soon as enough has been sent to show you a portion, and the rest continues to "stream" in as you watch the beginning parts. The leading technology here is RealNetworks; the limitation for you, the humble web page developer, is that RealVideo requires specialized servers to transmit streaming data. You can find great examples of RealVideo from the CNN news site.

It also takes some special web browser "add-ons" from the viewers end to see digital video. RealVideo and QuickTime require browser "plug-ins" to work. Fortunately, most web browsers now come with these technologies already included, but sometimes they may be updated. You should not, however count on everyone being ready to view video content!

Because video is a high bandwidth media format, as a design principle you should place video at a "click away", meaning that you present video as an option for your web site visitor to click to view, with some advance notice. We will demonstrate this in our lesson.

To include a digital video clip in a web page, we use the <EMBED> tag, which in some ways is similar to the <IMG) tag in that we specify a file source and the dimensions of the media we want inserted into the page:

 <EMBED src="video.mov" width="320" height="240"></embed>

There are other options to add to this tag to control the playback:

For more details on the EMBED parameters, see Apple's QuickTime Authoring site.

c. Sound of [web] Music

Sound is one of our most crucial human senses for receiving information and it can be used very effectively for web sites.

However, as you visit different web sites, the main time you come across sound is hearing some corny rendition of marching music, some vague familiar television show theme song, or tinker-toned Beethoven as soon as a web page loads. When a designer adds irrelevant graphics to a work, it is called "Eye Candy"; using sound for many web sites amounts to "Ear Candy".

"So, M. Opinionated, when is sound good?" Good question. Audio can be very useful for re-casting historic moments (speeches, special events, news, etc). It often is a less bandwidth alternative to video when the content is mostly spoken (e.g. classroom lecture). Obviously it might be used to learn about music and acoustics, to compare renditions of classic works, and simply to entertain-- the web can act as a radio. Sound may be used to set an environment (soft music for reading a poem).

Like video, sound must be converted analog to digital, from audio waves that travel through air, to numerical representations of wave frequencies. It can be done as easily as talking into a microphone plugged into the back of your computer, to high end digital recording in a sound studio. In the end, you end up with a computer file that can be played back through a speaker and, again travels through the air to your ears.

Sound files come in many different formats, which creates another layer of alphabet soup confusion. Some of the common file formats are WAVE (WAV), AIFF, AU, MIDI, MP3 etc. A comprehensive overview of the differences between them is beyond our tutorial, and we will just have to accept that we can have a sound file on a computer that can be sent over the Internet and played at the other end.

One format is of special interest, MIDI, because it generally makes for the smallest sound files. Rather than digitizing the sound waves itself, in MIDI format sounds are represented as more or less text characters representing the notes on different types of instruments, and when it is played back, the computer uses a built in sound library to play back the designated note. Therefore, the data that sent is very small. MIDI sounds tend to have a "toy-like" playback and are no where as rich as a CD audio.

Many sites offer sound in RealAudio format in which the sound files streams from a special web server to your web browser. This is most efficient for so called "web radio" stations, sites that offer real time audio news feeds, sites that promote musical events, etc (e.g. World Radio Network, RadioTower, Broadtcast.com, NPR, CNN). Because it requires special equipment, RealAudio is not part of this tutorial.

We also should mentioned the format known as MP3, or MPEG Audio Layer 3, a special form of high quality audio that can compress a very rich sound file into a much smaller file. It may be a music format that changes the music industry. You can find many sites such as MP3.com that offer MP3 music, but again, encoding content into this special format calls for special hardware and software (and touches on tricky legal issues of encoding other artist's content).

For more information on audio over the web, see the Web Developer's Virtual Library for Audio for the WorldWide Web

To include a sound file in a web page, we typically use the same <embed> tag that we saw in the previous lesson on web video:

 <embed src="muzak.wav" autoplay=true controller=false></embed>

which is the typical way to write a sound file that will be played automatically as soon as a web page is opened, and by having the controller invisible, to the person seeing your page, the music just starts playing magically. If you want to provide them the choice of playing the sound or not, you would have the controller visible and the autoplay set to false:

 <embed src="muzak.wav" autoplay=false controller=true></embed>

Again, if you are going to use music or sound in your web page, think carefully about the purpose of the content and if it will be reasonable to hear it every time a person goes to that page. You should never assume that the audio will work for every visitor (and some visitors are deaf), so consider providing text alternatives or suggestions for people that may not be able to hear the content.

• SoundAmerica
  http://soundamerica.com/
• The Free Site
  http://www.thefreesite.com/
• Yahoo : Multimedia
  http://dir.yahoo.com/Computers_and_Internet/Multimedia/Audio/

More Information

You can always build a link to any media file by using our familiar hypertext link:

  Try out my latest <a href="new_riff.wav">guitar riff</a> 
  or <a href="trumpet.mid">trumpet call</a>

assuming we had a WAV file and a MIDI file with these names. The web browser will leave the page it was linked from and then try to load the sounds the best it can, in blank web page. After hearing the sound, you would have to press the browser back button to return to the page you came from. The implementation is not as seamless as embedding it in the page but it works.

d. Hit Me With a Shockwave

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0" 
WIDTH="480" HEIGHT="300" NAME="sw" ID="swmovie">
	<PARAM NAME="SRC" VALUE="sw_file.dcr">
	<PARAM NAME="BGCOLOR" VALUE="#FFFFFF">

	<embed src="sw_file.dcr" 
	width=480 height=300 bgcolor=#FFFFFF 
	pluginspage="http://www.macromedia.com/shockwave/download/">
	</embed>
</OBJECT>