Multimedia on the Web: Issues of Bandwidth
• Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second.
• Consider bandwidth when working with multimedia on a Web site.
• The higher quality the media, the larger the file size and the longer the load time.

Adding Multimedia to a Web Page
• Modern multimedia can be added to a Web page two different ways:
– <audio> and <video> tags (HTML 5)
– <embed> and <object> tags (HTML 4.01)
The old-fashioned way is no longer popular.

Audio Media: Basic Definitions
• Every sound wave is composed of two components:
– Amplitude - the height of the wave.
Amplitude relates to the sound’s volume
– Frequency - the speed at which the sound wave moves.
Frequency relates to sound pitch

Digitizing Audio
• Sound waves are analog functions
(represent a continuously varying signal)
• To store the information digitally , however, it must be converted to discrete pieces of information.
• The quality of the conversion is measured in two ways: sampling rate and sampling resolution .

The Sampling Rate
• Digital recording measures the sound’s amplitude at discrete moments in time
• Each measurement or slice is called a sample
• Samples per second taken is called the sampling rate, measured in Khz.
Low sampling rate
Medium sampling rate
High sampling rate

Sampling Resolution
• Sampling resolution indicates the precision in measuring the sound within each sample. Resolutions include:
– 8-bit
– 16-bit
– 32-bit

Sample Rates and Resolution
Sampling rate and sample resolution as related to sound quality:
Sampling Rate and Sample Resolution
8 KHz, 8-bit, mono
22 KHz, 16-bit, stereo
44 KHz, 16-bit, stereo
192 KHz, 24-bit, 5.1 channel
Sound Quality
Telephone
FM Radio
CD
Blu-Ray High Def DVD

Some Popular Audio Media Formats
• There are different sound file formats used by different operating systems:
 AIFF – developed for Apple Macintosh OS
 WAV – developed for Microsoft Windows OS
 RealAudio – developed for realtime Web apps
 AU – developed for UNIX OS
 MP3 – primary format for music sharing
 MIDI – limited to instrumental music
 OGG – royalty-free but not very popular

Streaming vs Nonstreaming Media
• Nonstreaming media are completely downloaded by users before being played. It may produce lengthy delays
• Streaming media are processed in a steady and continuous stream as they are downloaded by the browser

The HTML5 <audio> Tag
To add an audio clip under HTML5, use the audio tag:
<audio>
<source src=”url1” />
<source src=”url2” />
…
</audio> where url1, url2, etc. are the possible sources of the audio.
Example:
<audio>
<source src=”song.mp3” />
<source src=”song.ogg” />
</audio>

<audio> Attributes

Example: Using the controls Attribute
<audio controls=“controls”>
<source src=”song.mp3” />
<source src=”song.ogg” />
</audio>

Audio in HTML 4.01 Using <embed>
• Older browsers that don’t support the HTML5
</audio> tag instead rely on plug-ins to play embedded media clips using the <embed> tag.
<audio controls=“controls”>
<source src=”song.mp3” />
<source src=”song.ogg” />
<embed src=”overture.mp3” type=”audio/mpeg” width=”250” height=”10” />
</audio>

Video Media: Basic Definitions
• Video files are composed of a series of single images called frames .The number of frames shown in a period of time is the frame rate.
• Reducing the frame rate and frame size reduces the size of your file.

Codecs and Video File Formats
• Codecs are programs that compress and decompress the video to control the file size.

The HTML5 <video> Tag
To add a video clip under HTML5, use the video tag:
<video>
<source src=”url1” />
<source src=”url2” />
…
</video> where url1, url2, etc. are the possible sources of the video.
Example:
<video>
<source src=”movie.mp4” />
<source src=”movie.flv” />
</video>

<video> Attributes
<video controls=“controls”>
<source src=”movie.mp4” />
<source src=”movie.flv” />
</video>

Video in HTML 4.01 Using <object>
The <object> tag was introduced in the specifications for HTML 4 for the purpose of marking any kind of nontextual content. Parameters are passed using the
<param> tag.
<object data=”fun.swf” type=”application/x-shockwave-flash” width=”300” height=”200”>
<param name=”movie” value=”fun.swf” />
<param name=“loop” value=“true” />
</object>

YouTube: An Example of Nesting Elements
<object width="425" height="344">
<param name="movie“ value="http://www.youtube.com/v/cd8RKJEk0EM&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/cd8RKJEk0EM&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
</embed>
</object>

Embedding Applications with Java Objects
• Oak was developed by
Sun Microsystems as an operating system intended to be used by common appliances and devices
• Oak was renamed Java in 1995
• HotJava , a Java interpreter, runs programs written in the
Java language

Java Applets
• Applets are Java programs that run within a Web browser.
• Applets are displayed as embedded objects on a
Web page in an applet window. Parameters are passed to the applet using the <param> tag.
• You use a Java Developer’s Kit (JDK) to write your own Java applet. Compiling changes the file into an executable file that can run by itself without the JDK. The executable file is called a class file (e.g., CreditRoll.class
) .

Using <object> to Insert Java Applets
• To embed a Java applet, use the <object> element:
<object type=”application/x-java-applet” width=”value” height=”value”>
<param name=”code” value=”url” /> parameters for the applet
</object>
Parameters are specific to the applet you’re inserting. There may be many, a few, or none.

Example of a Java Applet: CreditRoll
<object type=”application/x-java-applet” width=”250” height=”250”>
<param name=”code” value=”CreditRoll.class” />
<param name=“speed” value=“100” />
<param name=“repeat” value=“yes” />
<param name=“text1” value=“Royal Wedding” />
<param name=“text2” value=“Fred Astaire as Tom” />
<param name=“text3” value=“Jane Powell as Ellen” />
</object>