Transcript Multimedia on the Web

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
Sound Quality
8 KHz, 8-bit, mono
22 KHz, 16-bit, stereo
44 KHz, 16-bit, stereo
192 KHz, 24-bit, 5.1 channel
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
<param
<param
<param
<param
<param
name=”code”
name=“speed”
name=“repeat”
name=“text1”
name=“text2”
name=“text3”
</object>
value=”CreditRoll.class” />
value=“100” />
value=“yes” />
value=“Royal Wedding” />
value=“Fred Astaire as Tom” />
value=“Jane Powell as Ellen” />