Transcript Chapter 8 - Cal State LA - Instructional Web Server

XP
Tutorial 8
Using Multimedia on the Web
Enhancing a Web Site with Sound, Video, and
Applets
1
Working with Multimedia
XP
 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
2
Working with Multimedia
XP
 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
3
Working with Multimedia
XP
Inline media
External media
4
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).
5
Working with Audio
XP
6
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
7
Sampling Rate
XP
Low sampling rate
Medium sampling
rate
High sampling rate
8
Sampling Rate, Sample
XP
Resolution, and Channels
 Sampling resolution indicates the
precision in measuring the sound within
each sample
 8-bit
 16-bit
 32-bit
9
Sample Resolution
XP
Low sample resolution
High sample resolution
10
Sample Rates and ResolutionXP
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)
11
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
12
Sound File Formats
XP
 WAV - very common - built into OS
 MP3 - most common - compressed, open
 Nonstreaming media - completely
downloaded before user can hear
 Streaming media - start listening
immediately
 MIDI - standard for most sound cards
13
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
14
Sound File Formats
XP
 Nonstreaming media must be
completely downloaded by users before
being played
 May produce lengthy delays
15
Sound File Formats
XP
 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
Link to external file - helper applications - help browsers to
interpret and present files
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 plug-ins to
run embedded objects - user must have
plug-in
 Creating an embedded object - 2
elements - embed & object
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 SoundsXP
 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
 Reduce the size of the video frame or by
reducing the number of colors
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 ContentXP
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 in the Java
language
 HotJava is a Java interpreter (it understands and
runs Java languages)
30
Applets and Java InterpretersXP
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
XP
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.
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 - similar to Java applets
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
XP
•Assign #20 - Case 1, pg. 473-475 - print code
and finished product, black and white is
acceptable.
•Assign #21 - Case 2, pg. 475-477 - print code
and finished product, black and white is
acceptable.
42