Transcript Tutorial 8

XP
Tutorial 8
Using Multimedia on the
Web
Enhancing a Web Site with Sound,
Video, and Applets
1
Objectives









XP
Working with Multimedia
Working with Audio
Linking to an Audio Clip
Embedding an Audio Clip
Working with Video
Linking to a Video Clip
Embedding a Video Clip
Using a Dynamic Source
Supporting Non-Embedded Elements
2
Objectives




XP
Introducing Java
Working with Applets
Creating a Marquee with Internet Explorer
Working with the Object Element
3
Working with Multimedia

Bandwidth is a measure of the amount of
data that can be sent through a
communication pipeline each second
•

XP
Consider bandwidth when working with multimedia on
a Web site
Multimedia can be added to a Web page two
different ways:
•
•
External media is a sound of video file that’s
accessed through a link
• Useful for a low bandwidth
Inline media is placed within a Web page as an
embedded object
4
Working with Multimedia
XP
Inline media
External media
5
Working with Audio

XP
Every sound wave is composed of
two components:
• Amplitude- the height of the wave.
Amplitude relates to the sound’s volume
(the higher the amplitude, the louder the
sound).
• Frequency- the speed at which the
sound wave moves. Frequency relates
to sound pitch (high frequencies have
high pitches).
6
Working with Audio
XP
7
Sampling Rate, Sample
Resolution, and Channels

XP
Sound waves are analog functions
(represent a continuously varying signal)
• To store the information, however, it must be
converted to pieces of information.

Digital recording measures the sound’s
amplitude at discrete moments in time
• Each measurement is called a sample
• Samples per second taken is called the sampling
rate
8
XP
Sampling Rate
Low sampling rate
Medium sampling
rate
High sampling rate
9
Sampling Rate, Sample
Resolution, and Channels

XP
Sampling resolution indicates the
precision in measuring the sound
within each sample
• 8-bit
• 16-bit
• 32-bit
10
XP
Sample Resolution
Low sample resolution
High sample resolution
11
Sample Rates and Resolution
XP
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
48 KHz, 16-bit, stereo
(DAT)
Telephone
Radio
CD
Digital Audio Tape
12
Sound File Formats
XP
There are different sound file
formats used for different operating
systems
 Different file formats provide varying
levels of sound quality and sound
compression

13
Sound File Formats
XP
WAV
 Nonstreaming media
 Streaming media
 MIDI

14
Sound File Formats

XP
MP3 is a version of the MPEG
format, which compresses audio
files with minor impact on sound
quality
• One controversy around the MP3
format involves copyrighted material
that has been copied as MP3 without
the permission of the artist or producers
15
Sound File Formats

XP
Nonstreaming media must be
completely downloaded by users before
being played
• May produce lengthy delays

Streaming media are processed in a
steady and continuous stream as they
are downloaded by the browser
• Both sound and video
16
Sound File Formats

XP
MIDI (Musical Instrument Digital
Interface) converts an analog
signal to a series of functions
describing the pitch, length, and
volume of each note
• MIDI format is limited to instrumental
music and cannot be used for general
sounds, such as speech
17
Linking to an Audio Clip
XP
Inserting links to the sound clips
18
Embedding an Audio Clip

XP
An embedded object is any media
clip, file, program, or other object
that can be run or viewed from
within a Web page
• Browsers need the appropriate plugins to run embedded objects
19
Embedding an Audio Clip
XP
(Internet Explorer and Netscape)
To embed a sound or video clip, use the
embed element:
<embed src=“url” width=“value”
height=“value” autostart=“type” />
Where url is the location of the object, the width and height
attributes specify the width and the height of the object in
pixels, and type is either true (to start the clip automatically
when the page loads) or false (to start the clip manually).
20
Playing Background Sounds

XP
Internet Explorer (with Version 3.0)
introduced an element to play background
sounds:
<bgsound src=“url” balance=“value”
loop=“value” volume=“value” />
Where url is the URL of the sound file, the balance attribute
defines how the sound should be balanced between left and
right speakers, loop defines how many times the sound clip
is played, and the volume attribute indicates the background
sound volume.
21
Working with Video
XP
Video files add a visual element to a
Web page as well as provide
information
 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

22
Frame Rates and Codecs

XP
Reducing the frame rate reduces the size of
your file
• This is one way to control file size of video files

Using a Codec
(compression/decompression) is another
way to control the file size
23
Video File Formats
XP
24
Linking to a Video Clip

XP
Follow the same procedure to link a
video clip as you would to link a sound
clip
• Include information about the size of each
video file so that users can determine
whether they want to retrieve the clip
25
Embedding a Video Clip

XP
Use the same embed element to
embed a video file as you did to
embed a sound clip
• You must specify a source for an
embedded video clip with the src attribute
and a size for the clip using the height and
width attributes
26
Using a Dynamic Source

XP
To turn inline images into dynamic video clips,
use the following syntax:
<img src=“url” dynsrc=“url” start=“type”
loop=“value” control=“control” />
Where the dynsrc attribute specifies the URL of a dynamic
(video) version of the inline image. The start attribute tells the
browser when to start the clip, the loop attribute specifies the
number of times the video will play, and the control attribute
specifies whether IE should display player controls below the
inline image to start and stop the video clip.
27
Supporting Non-Embedded
Elements


XP
If you want to support older browsers, you
can add the noembed element
The noembed element works like the
noframe element for frames, providing a
way to support older browsers that do not
recognize embedded objects
28
Using Non-Embedded Content
XP
To provide alternate content for browsers that don’t
support embedded objects, use the code
<embed attributes />
<noembed>
alternate content
</noembed>
where alternate content is the content displayed by
browsers that don’t support embedded objects
29
Introducing Java




XP
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 runs programs written Java
language
in the HotJava is a Java interpreter (it
understands and runs Java languages)
30
Applets and Java Interpreters
XP
31
Applets



XP
Applets are displayed as embedded
objects on a Web page in an applet
window
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
32
Working with Applets
XP
Attributes of the applet element
33
Inserting a Java Applet

XP
To insert a Java applet, use the code
<applet code=“file”>
<param name=“text” value=“value” />
<param name=“text” value=“value” ?>
…
</applet>
Where file is the name of the Java class file, text is
the name of an applet parameter, and value is the
parameter’s value.
34
Creating a Marquee with
Internet Explorer

XP
An alternative to using an applet to
create a box with scrolling text is to
create a marquee element
<marquee
attributes>content</marquee>
Where attributes is one or more of the
marquee elements, and content is the page
content that appears in the marquee box.
35
Working with the Object
Element

XP
The object element is the generic
element for any object whose content is
stored in a file separate from the current
Web page
•
•
•
•
•
Inline images
Sound clips
Video clips
Program applets
Other HTML documents
36
Working with the Object
Element
XP
Specific and generic elements
37
Working with the Object
Element

XP
MIME
(Multipurpose
Internet Mail
Extension)
names are used
to indicate the
type of data
using the type
attribute in an
object element.
38
ActiveX


XP
ActiveX attaches desktop applications to
Web pages
ActiveX objects are referred to as
ActiveX controls
39
Tips for Using Multimedia


XP
When linking to multimedia, provide a
variety of media formats to ensure that all
users have access to formats they can
use
Include the file size in links to large
multimedia files to notify users with low
bandwidth connections
40
Tips for Using Multimedia



XP
Do not embed multimedia clips in your Web
pages unless you are sure that users will be
accessing the pages through a high-speed
connection
Do not insert media clips unless you provide a
method for users to turn off the clips; if a clip
plays automatically, allow it to play only once
Use the embed and applet elements in
preference to the object element because of the
broader browser support
41