Transcript Document

XP
Tutorial 8
Using Multimedia on the Web
Enhancing a Web Site with Sound, Video, and Applets
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
1
XP
Objectives
•
•
•
•
Working with Multimedia
Working with Audio
Linking to an Audio Clip
Embedding an Audio Clip
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
2
XP
Objectives
•
•
•
•
•
Working with Video
Linking to a Video Clip
Embedding a Video Clip
Using a Dynamic Source
Supporting Non-Embedded Elements
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
3
XP
Objectives
•
•
•
•
Introducing Java
Working with Applets
Creating a Marquee with Internet Explorer
Working with the Object Element
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
4
XP
Working with Multimedia
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
5
XP
Working with Multimedia
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
6
XP
Working with Multimedia
Inline media
External media
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
7
XP
Working with Audio
• 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).
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
8
XP
Working with Audio
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
9
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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
10
XP
Sampling Rate
Low sampling rate
Medium sampling
rate
High sampling rate
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
11
XP
Sampling Rate, Sample
Resolution, and Channels
• Sampling resolution indicates the
precision in measuring the sound within
each sample
– 8-bit
– 16-bit
– 32-bit
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
12
XP
Sample Resolution
Low sample resolution
High sample resolution
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
13
XP
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
48 KHz, 16-bit, stereo
Telephone
Radio
CD
Digital Audio Tape (DAT)
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
14
XP
Sound File Formats
• There are different sound file formats
used for different operating systems
• Different file formats provide varying
levels of sound quality and sound
compression
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
15
XP
Sound File Formats
•
•
•
•
WAV
Nonstreaming media
Streaming media
MIDI
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
16
XP
Sound File Formats
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
17
XP
Sound File Formats
• Nonstreaming media must be
completely downloaded by users before
being played
– May produce lengthy delays
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
18
XP
Sound File Formats
• Streaming media are processed in a
steady and continuous stream as they
are downloaded by the browser
– Both sound and video
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
19
XP
Sound File Formats
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
20
XP
Linking to an Audio Clip
Inserting links to the sound clips
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
21
XP
Embedding an Audio Clip
• 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 plug-ins to
run embedded objects
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
22
XP
Embedding an Audio Clip
(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).
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
23
XP
Playing Background Sounds
• 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.
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
24
XP
Working with Video
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
25
XP
Frame Rates and Codecs
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
26
XP
Video File Formats
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
27
XP
Linking to a Video Clip
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
28
XP
Embedding a Video Clip
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
29
XP
Using a Dynamic Source
• 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.
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
30
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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
31
XP
Using Non-Embedded Content
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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
32
XP
Introducing Java
• 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 in the Java
language
– HotJava is a Java interpreter (it understands and
runs Java languages)
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
33
XP
Applets and Java Interpreters
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
34
XP
Applets
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
35
XP
Working with Applets
Attributes of the applet element
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
36
XP
Inserting a Java Applet
• 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.
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
37
XP
Creating a Marquee with Internet
Explorer
• 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.
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
38
XP
Working with the Object Element
• The object element is the generic element for
any object whose content is stored in a file
separate from the current Web page
–
–
–
–
–
Tutorial 8
Inline images
Sound clips
Video clips
Program applets
Other HTML documents
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
39
XP
Working with the Object Element
Specific and generic elements
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
40
XP
Working with the Object Element
• MIME
(Multipurpose
Internet Mail
Extension) names
are used to
indicate the type of
data using the
type attribute in an
object element.
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
41
XP
ActiveX
• ActiveX attaches desktop applications to Web
pages
• ActiveX objects are referred to as ActiveX
controls
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
42
XP
Tips for Using Multimedia
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
43
XP
Tips for Using Multimedia
• 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
Tutorial 8
New Perspectives on Creating Web Pages with HTML,
XHTML, and XML
44