Movies and Sound

Please note that the features on this page require Apple's Quicktime. Please visit the Quicktime Download page for the latest version. Quicktime is a set of tools that allow the computer to play and edit, not only movies, but also sound. It is also a audio and video format, symbolized with the .mov ending.

The Moving Image

We have seen how one represents numbers, text, images, and sound on the computer. But how about movies?

You may have already guessed the answer. Movies are nothing more than sequences of images, displayed in a fast pace in front of our eyes. Consider the movie of the bouncing ball on the right. If you click the "play" button you will see a ball bouncing up and down. But if you click the "next frame" button instead, you will see the ball just a few pixels away of its previous position. Cartoons, of course, are also sequences, but of drawings rather than photo images.

To represent a sequence of images, you just use the same machinery you used to represent images, but many more times. In this simple approach, a movie's size would be the sum of all the images it contains. For example, if each movie frame has, say, width = 160 and height = 120, then each frame consists of 160*120 = 19200 pixels. If the image's bit depth is 2, then the size of each frame is 19200 pixels * 2 bits/pixel = 38400 bits. Convert to bytes by dividing by 8 to get 4800 bytes per frame or approximately 4.8 KB (or divide by 1024 to get 4.6875 KB). Now, if the movie plays for just 3 seconds displaying 15 frames per second (anything slower will seem like a slide show rather than a movie), the total size of the movie would be about 4.8 KB/frame * 3 sec * 15 frames/sec = 216 KB. And this does not include any sound!

That's a lot to pay for a 3 second movie with only 4 colors, but thankfully, we can compress it. Note that in the bouncing ball example, most of the background stays the same, so we do not need to represent it again and again in the sequence. We could just represent those pixels that change over time (the ball and the column of pixels behind it). That results in great savings of bytes. The bouncing ball movie is only 103KB. The movie format (quicktime in this case) takes care of it.

Embedding Movies and Sound

The EMBED tag and Movies

It is very easy to incorporate sound and movies into your web site. The magic is done by the powerful EMBED tag. Consider, for example the following movie that appears to be part of the web page.

When the page opens, the movie window appears, along with a controller underneath it. The movie will not automatically start playing, but you can start it by clicking at the start/pause button. The HTML tag for this movie is as follows:

<EMBED SRC="ghost.mov"
       PluginsPage="http://www.apple.com/quicktime/download/"
       WIDTH="160"
       HEIGHT="136"
       CONTROLLER="TRUE"
       LOOP="FALSE"
       AUTOPLAY="FALSE">
</EMBED>

Note that the first attribute is a PAGE for PLUGINS. The next to last character is a G, not a C; many people mispell this, reading it as PLUGIN SPACE. PluginsPage is an attribute that directs the browser to visit a web site containing the appropriate plug-in to handle Quicktime movies. Unlike images, a browser does not have the required functionality to handle movies. Different companies that are in the business of providing tools for movies, like Apple, Microsoft and others, come up with a "plug-in": a program that augments the browser's ability to do more things that it would ordinarily do. To see what plug-ins are already installed in your Safari browser, select "Installed Plug-ins" from the "Help" menu. On Internet Explorer check "File Helpers" under the "Preferences" menu option.

The second and third attributes are straightforward. HEIGHT and WIDTH correspond to the height and width of the movie window that appears on the page. 16 pixels of the 136 are actually occupied by the controller, so the real movie above is 160 by 120 pixels.

The fourth attribute, CONTROLLER, is a boolean parameter that can be set TRUE or FALSE. It refers to the visibility of the controller bar underneath the movie window. When it is FALSE, the controller will not appear. Still, you can start and stop a movie by double-clicking and clicking on its window, respectively.

The fifth attribute, LOOP, is also a boolean parameter that can be set to TRUE or FALSE. When it is TRUE, the movie will restart from the beginning after it plays. (This can be very annoying for a movie, but it may be very good for a small audio loop that provides background music to the page visitor.)

Finally, the AUTOPLAY parameter determines whether the movie will start playing as soon as it has loaded sufficient portion of itself on your computer.

The EMBED tag has lots of attributes. We will be using only a handful of them, as they are mentioned above. Take a look at the EMBED Tag Attributes page for detailed description of the rest.

The EMBED tag and Sound

To add sound, you just use the same EMBED tag. (For quicktime, sound is just a special kind of movie that has no pictures associated with it.)

<EMBED SRC="dogsound.mov"
       PLUGINSPAGE="http://quicktime.apple.com"
       HEIGHT="16"
       WIDTH="200"
       CONTROLLER="TRUE"
       LOOP="FALSE"
       AUTOPLAY="TRUE">
</EMBED>

Click here to hear a song you might know (by executing the boxed code above).

In addition to MOV there are several other sound formats: AIFF, MIDI, WAV, MP3, RAM. Some of them allow for streaming audio, i.e., audio that comes through your computer but is not saved on the hard drive; if you want to listen to it again, you would have to reload it. MIDI is a special format that specifies the notes to be played by the computer, and does not contain the actual sounds. You can listen, for example, many Beatles songs in MIDI format.

Here are some other examples of sound use:

• Music Department's Audioclips. Note that there is a image placeholder which says "Click here to Listen". Once you click on it, the real audio clip is loaded in the same location as the placeholder.
• Belly dancing music contains sound files in various formats such as AIFF and WAV.
• Song of Marconi (by Dennis Downey) - contains audio in .MP3 .ram formats. Click on the RealAudio and MP3 buttons to listen to it.

By the way, in addition to audio and movies, Quicktime can handle virtual reality tours. For example, you can take a Virtual Tour of the Science Center.

How can I get sound or movies for my web site?

• Download them from the web (respecting copyright).
• Digitize analog video. Equipment, instructions and help are available in Knapp Library. You can use the iMovie application on the Macs for editing.
• Import digital video from your digital camera or camcorder. Equipment can also be reserved from the Science Library and Knapp.
• Use a microphone to record sound. The Macs have an internal microphone. PCs need to attach one. Microphones and instructions are on reserve, in Knapp. Use the Amadeus application for recording and editing audio on the Macs.
• Record (actually, capture digital audio) from a CD. Use the QuickTime Player available in all public clusters. Make sure to compress your .mov files!

Additional information is provided in the lab on audio and movies. There are also instructions at the Software Support links of the Instructional Technology page at the Wellesley server.

The EMBED tag and Standards

The EMBED tag is not in any HTML standard, but is widely supported by browsers. Thus, you should use it unless standards compliance is very important, but you cannot rely on it. That's why we removed the W3C HTML 4.01 compliance icon from the end of this page.

• Introduction
• Syllabus
• Assignments
• Documentation
• Project

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Sunday, 11-Nov-2007 22:13:12 EST