LECTURE SLIDES

Working with Multimedia

Goals
By the end of this unit, you should be able to …
… describe & explain the different types of audio formats that web developers use.
… describe & explain the different types of video formats that web developers use.
… explain how to use the <object> and <param /> elements.

What is Multimedia?
Multimedia includes everything that "you can hear or see" and encompasses text, audio and video.
Most web browsers today can support sounds, videos, animations and other types of multimedia files.
Browsers may differ, however, in how they embed multimedia.

Common Audio Formats
Common audio formats that web developers use include the following:
MIDI (.mid)
RealAudio (.rm or .ram)
Waveform (.wav)
Moving Pictures Experts Group (.mp3)

The MIDI Format
The Musical Instrument Digital Interface (MIDI) format represents synthesized calculations of musical notes.
MIDIs cannot store sound, but they can store information about notes and tones.
MIDI file size is very small and most browsers support MIDI.

RealAudio
The RealAudio (.rm or .ram) format actually does double duty – it also can serve video.
We use RealAudio for streaming media.
We can optimize the file format for users with low bandwidth (but with a loss of quality).

Waveforms
IBM and Microsoft developed the waveform format (.wav).
All Windows computers can read the .wav format and most web browsers can also play waveforms.
File sizes tend to be very large.

Moving Pictures Experts Group
Originally developed for video, the Moving Pictures Experts Group type was extended to include audio only support (MP3).
MP3s offer excellent compression (results in smaller file sizes) coupled with high quality sound.

Common Video Formats
Common video formats include:
Audio Video Interleave (.avi)
Windows Media Format (.wmv)
MPEG Format (.mpg)
QuickTime (.mov)
RealVideo (.rm or .ram)
Shockwave Flash (.swf)

Audio Video Interleave
Microsoft developed the Audio Video Interleave (.avi) format.
All Windows computers support .avi, but support is spotty, at best, on other platforms.

Windows Media Format
Microsoft also developed the Windows Media Format (.wmv).
Although common on the web, non-Windows machines will need to install a free plugin to play (sometimes that won't even work).

Moving Pictures Experts Group
The Moving Pictures Experts Group (.mpg or .mpeg) format is, perhaps, the most popular video format on the web.
The .mpg enjoys wide, cross-platform support and wide support from almost all browsers.

QuickTime
Developed by Apple, the QuickTime (.mov) format is another popular video format on the web.
Apple computers can play QuickTime videos natively, but Windows computers will need a plugin to play QuickTime videos.

RealMedia
Like RealAudio, we use RealVideo (.rm or .ram) for streaming video content.
We can optimize .rm files for users with low-bandwidth (again, with a tradeoff in quality).

Shockwave Flash Format
Developed originally by Macromedia (now Adobe), the Shockwave Flash format (.swf) is gaining tremendous popularity on the web.
It requires a plugin (Flash Player). However, many browsers include the Player by default.

The <object> Element
We use the <object> element to embed video or audio into a web page.
At a bare minimum, we need to specify two attributes for our media to work:
type – specifies the MIME type of the multimedia to display.
data – specifies the path & filename of the media file.

<param /> Elements
Most of the time, the type and data attributes are not enough to play a media file.
To properly use a plugin, many times we'll need to include any number of <param /> tags (nested inside the <object> container) to specify properties like whether or not a control bar appears, whether the media auto starts, etc.
To use <param /> , consult with the technical notes of the company that developed the file format you are going to use …

The <embed> Element
The best, most-compliant way of including multimedia is to use the <object> element.
However, not all versions of web browsers support <object> (especially older versions of Netscape).
To still show our media, we might need to nest an <embed> container in our <object> container …

Multimedia Examples
Download and expand the file n241WorkingWithMultimedia_examples.zip .
View the files in the expanded folder.

Questions?

References
Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition . Sebastopol, CA: 2006.
Introduction to Web Multimedia from the W3Schools: http://www.w3schools.com/media/media_intro.asp

LECTURE SLIDES

by JustinTimb on May 19, 2010

Accessibility

Categories

Upload Details

Usage Rights

Statistics

LECTURE SLIDES Presentation Transcript