Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
1
XP
Using Multimedia on the Web
Enhancing a Web Site with Sound, Video, and Applets
Tutorial 8
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
2
XPObjectives
• Working with Multimedia• Working with Audio• Linking to an Audio Clip• Embedding an Audio Clip
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
3
XPObjectives
• 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 HTML and XHTML, Comprehensive
4
XPObjectives
• Introducing Java • Working with Applets• Creating a Marquee with Internet Explorer • Working with the Object Element
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
5
XPWorking 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 HTML and XHTML, Comprehensive
6
XPWorking 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 HTML and XHTML, Comprehensive
7
XPWorking with Multimedia
Inline media
External media
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
8
XPWorking 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 HTML and XHTML, Comprehensive
9
XPWorking with Audio
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
10
XPSampling Rate, Sample Resolution, and Channels
• 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 HTML and XHTML, Comprehensive
11
XPSampling Rate
Low sampling rate
Medium sampling rate
High sampling rate
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
12
XPSampling 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 HTML and XHTML, Comprehensive
13
XPSample Resolution
Low sample resolution
High sample resolution
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
14
XPSound 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 HTML and XHTML, Comprehensive
15
XPSound File Formats
• WAV
• Nonstreaming media
• Streaming media
• MIDI
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
16
XPLinking to an Audio Clip
Inserting links to the sound clips
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
17
XPEmbedding 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 HTML and XHTML, Comprehensive
18
XPPlaying 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 HTML and XHTML, Comprehensive
19
XPWorking 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 HTML and XHTML, Comprehensive
20
XPFrame 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 HTML and XHTML, Comprehensive
21
XPVideo File Formats
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
22
XPLinking to a Video Clip
• Follow the same procedure to link a video clip as you would to link a sound clip.
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
23
XPEmbedding a Video Clip
• Use the same embed element to embed a video file as you did to embed a sound clip.
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
24
XPUsing 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 HTML and XHTML, Comprehensive
25
XPSupporting Non-Embedded Elements
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 HTML and XHTML, Comprehensive
26
XPIntroducing 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 HTML and XHTML, Comprehensive
27
XPApplets and Java Interpreters
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
28
XPApplets
• 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 HTML and XHTML, Comprehensive
29
XPWorking with Applets
Attributes of the applet element
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
30
XPCreating 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 HTML and XHTML, Comprehensive
31
XPWorking 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.– Inline images– Sound clips– Video clips– Program applets– Other HTML documents
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
32
XPWorking with the Object Element
Specific and generic elements
Tutorial 8 New Perspectives on HTML and XHTML, Comprehensive
33
XPWorking 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 HTML and XHTML, Comprehensive
34
XPActiveX
• ActiveX attaches desktop applications to Web pages.
• ActiveX objects are referred to as ActiveX controls.