11

XP

Using Multimedia on the WebUsing Multimedia on the WebEnhancing a Web Site with Sound, Video, and Enhancing a Web Site with Sound, Video, and

AppletsApplets

Tutorial 8

22

XPWorking with MultimediaWorking with Multimedia

Bandwidth Bandwidth is a measure of the amount of is a measure of the amount of data that can be sent through a data that can be sent through a communication pipeline each secondcommunication pipeline each second Consider bandwidth when working with Consider bandwidth when working with

multimedia on a Web sitemultimedia on a Web site

33

XPWorking with MultimediaWorking with Multimedia

Multimedia can be added to a Web page Multimedia can be added to a Web page two different ways:two different ways: External mediaExternal media is a sound of video file is a sound of video file

that’s accessed through a linkthat’s accessed through a linkUseful for a low bandwidthUseful for a low bandwidth

Inline mediaInline media is placed within a Web page as is placed within a Web page as an embedded objectan embedded object

44

XPWorking with MultimediaWorking with Multimedia

Inline media

External media

55

XPWorking with AudioWorking with Audio

Every sound wave is composed of two Every sound wave is composed of two components:components: AmplitudeAmplitude- the height of the wave. - the height of the wave.

Amplitude relates to the sound’s volume (the Amplitude relates to the sound’s volume (the higher the amplitude, the louder the sound).higher the amplitude, the louder the sound).

FrequencyFrequency- the speed at which the sound - the speed at which the sound wave moves. Frequency relates to sound wave moves. Frequency relates to sound pitch (high frequencies have high pitches).pitch (high frequencies have high pitches).

66

XPWorking with AudioWorking with Audio

77

XPSampling Rate, Sample Resolution, Sampling Rate, Sample Resolution,

and Channelsand Channels Sound waves are Sound waves are analoganalog functions (represent functions (represent

a continuously varying signal)a continuously varying signal) To store the information, however, it must be To store the information, however, it must be

converted to pieces of information.converted to pieces of information.

DigitalDigital recording measures the sound’s recording measures the sound’s amplitude at discrete moments in timeamplitude at discrete moments in time Each measurement is called a Each measurement is called a samplesample

Samples per second taken is called the Samples per second taken is called the sampling ratesampling rate

88

XPSampling RateSampling Rate

Low sampling rate

Medium sampling rate

High sampling rate

99

XPSampling Rate, Sample Resolution, Sampling Rate, Sample Resolution,

and Channelsand Channels Sampling resolutionSampling resolution indicates the indicates the

precision in measuring the sound within precision in measuring the sound within each sampleeach sample 8-bit8-bit 16-bit16-bit 32-bit32-bit

1010

XPSample ResolutionSample Resolution

Low sample resolution

High sample resolution

1111

XPSample Rates and ResolutionSample Rates and Resolution

Sampling rate and sample resolution as Sampling rate and sample resolution as

related to sound quality:related to sound quality:

Sampling Rate and Sample ResolutionSampling Rate and Sample Resolution Sound QualitySound Quality

8 KHz, 8-bit, mono8 KHz, 8-bit, mono TelephoneTelephone

22 KHz, 16-bit, stereo22 KHz, 16-bit, stereo RadioRadio

44 KHz, 16-bit, stereo44 KHz, 16-bit, stereo CDCD

48 KHz, 16-bit, stereo48 KHz, 16-bit, stereo Digital Audio Tape Digital Audio Tape (DAT)(DAT)

1212

XPSound File FormatsSound File Formats

There are different sound file formats There are different sound file formats used for different operating systemsused for different operating systems

Different file formats provide varying Different file formats provide varying levels of sound quality and levels of sound quality and sound sound compressioncompression

1313

XPSound File FormatsSound File Formats

WAV - very common - built into OSWAV - very common - built into OS MP3 - most common - compressed, openMP3 - most common - compressed, open Nonstreaming media - completely Nonstreaming media - completely

downloaded before user can heardownloaded before user can hear Streaming media - start listening Streaming media - start listening

immediatelyimmediately MIDI - standard for most sound cardsMIDI - standard for most sound cards

1414

XPSound File FormatsSound File Formats

MP3MP3 is a version of the MPEG format, is a version of the MPEG format, which compresses audio files with minor which compresses audio files with minor impact on sound qualityimpact on sound quality One controversy around the MP3 format One controversy around the MP3 format

involves copyrighted material that has been involves copyrighted material that has been copied as MP3 without the permission of the copied as MP3 without the permission of the artist or producersartist or producers

1515

XPSound File FormatsSound File Formats

Nonstreaming mediaNonstreaming media must be must be completely downloaded by users before completely downloaded by users before being playedbeing played May produce lengthy delaysMay produce lengthy delays

1616

XPSound File FormatsSound File Formats

Streaming mediaStreaming media are processed in a are processed in a steady and continuous stream as they steady and continuous stream as they are downloaded by the browserare downloaded by the browser Both sound and videoBoth sound and video

1717

XPSound File FormatsSound File Formats

MIDI (Musical Instrument Digital MIDI (Musical Instrument Digital Interface)Interface) converts an analog signal to a converts an analog signal to a series of functions describing the pitch, series of functions describing the pitch, length, and volume of each notelength, and volume of each note MIDI format is limited to instrumental music MIDI format is limited to instrumental music

and cannot be used for general sounds, and cannot be used for general sounds, such as speechsuch as speech

1818

XPLinking to an Audio ClipLinking to an Audio Clip

Inserting links to the sound clips

Link to external file - helper applications - help browsers to interpret and present files

1919

XPEmbedding an Audio ClipEmbedding an Audio Clip

An An embedded objectembedded object is any media clip, is any media clip, file, program, or other object that can be file, program, or other object that can be run or viewed from run or viewed from withinwithin a Web page a Web page Browsers need the appropriate Browsers need the appropriate plug-insplug-ins to to

run embedded objects - user must have run embedded objects - user must have plug-inplug-in

Creating an embedded object - 2 Creating an embedded object - 2 elements - embed & objectelements - embed & object

2020

XPEmbedding an Audio ClipEmbedding an Audio Clip

(Internet Explorer and Netscape)(Internet Explorer and Netscape)

To embed a sound or video clip, use the To embed a sound or video clip, use the embed element:embed element:

<embed src=“<embed src=“urlurl” width=“” width=“valuevalue” ” height=“height=“valuevalue” autostart=“” autostart=“typetype” />” />

Where Where urlurl is the location of the object, the width and height is the location of the object, the width and height attributes specify the width and the height of the object in pixels, attributes specify the width and the height of the object in pixels, and and typetype is either true (to start the clip automatically when the is either true (to start the clip automatically when the

page loads) or false (to start the clip manually).page loads) or false (to start the clip manually).

2121

XPPlaying Background SoundsPlaying Background Sounds

Internet Explorer (with Version 3.0) Internet Explorer (with Version 3.0) introduced an element to play background introduced an element to play background sounds:sounds:<bgsound src=“url” balance=“value” <bgsound src=“url” balance=“value”

loop=“value” volume=“value” />loop=“value” volume=“value” />

Where url is the URL of the sound file, the balance attribute Where url is the URL of the sound file, the balance attribute defines how the sound should be balanced between left defines how the sound should be balanced between left and right speakers, loop defines how many times the and right speakers, loop defines how many times the sound clip is played, and the volume attribute indicates sound clip is played, and the volume attribute indicates the background sound volume.the background sound volume.

2222

XPWorking with VideoWorking with Video

Video files add a visual element to a Web Video files add a visual element to a Web page as well as provide informationpage as well as provide information

Video files are composed of a series of Video files are composed of a series of single images called single images called framesframes

The number of frames shown in a period The number of frames shown in a period of time is the of time is the frame rateframe rate

2323

XPFrame Rates and CodecsFrame Rates and Codecs

Reducing the frame rate reduces the size of Reducing the frame rate reduces the size of your fileyour file This is one way to control file size of video filesThis is one way to control file size of video files

Using a Using a CodecCodec (compression/decompression) (compression/decompression) is another way to control the file sizeis another way to control the file size

Reduce the size of the video frame or by Reduce the size of the video frame or by reducing the number of colorsreducing the number of colors

2424

XPVideo File FormatsVideo File Formats

2525

XPLinking to a Video ClipLinking to a Video Clip

Follow the same procedure to link a Follow the same procedure to link a video clip as you would to link a sound video clip as you would to link a sound clipclip Include information about the size of each Include information about the size of each

video file so that users can determine video file so that users can determine whether they want to retrieve the clipwhether they want to retrieve the clip

2626

XPEmbedding a Video ClipEmbedding a Video Clip

Use the same embed element to embed Use the same embed element to embed a video file as you did to embed a sound a video file as you did to embed a sound clipclip You must specify a source for an You must specify a source for an

embedded video clip with the src attribute embedded video clip with the src attribute and a size for the clip using the height and and a size for the clip using the height and width attributeswidth attributes

2727

XPUsing a Dynamic SourceUsing a Dynamic Source

To turn inline images into dynamic video clips, To turn inline images into dynamic video clips, use the following syntax:use the following syntax:<img src=“url” dynsrc=“url” <img src=“url” dynsrc=“url” start=“type” start=“type” loop=“value” control=“control” />loop=“value” control=“control” />

Where the dynsrc attribute specifies the URL of a Where the dynsrc attribute specifies the URL of a

dynamic (video) version of the inline image. The start dynamic (video) version of the inline image. The start attribute tells the browser when to start the clip, the loop attribute tells the browser when to start the clip, the loop attribute specifies the number of times the video will play, attribute specifies the number of times the video will play, and the control attribute specifies whether IE should and the control attribute specifies whether IE should display player controls below the inline image to start and display player controls below the inline image to start and stop the video clip.stop the video clip.

2828

XPSupporting Non-Embedded Supporting Non-Embedded

ElementsElements

If you want to support older browsers, If you want to support older browsers, you can add the noembed elementyou can add the noembed element

The noembed element works like the The noembed element works like the noframe element for frames, providing a noframe element for frames, providing a way to support older browsers that do way to support older browsers that do not recognize embedded objectsnot recognize embedded objects

2929

XPUsing Non-Embedded ContentUsing Non-Embedded Content

To provide alternate content for browsers that don’t To provide alternate content for browsers that don’t support embedded objects, use the codesupport embedded objects, use the code

<embed <embed attributesattributes /> />

<noembed><noembed>

alternate contentalternate content

</noembed></noembed>

where where alternate contentalternate content is the content displayed by browsers is the content displayed by browsers that don’t support embedded objectsthat don’t support embedded objects

3030

XPIntroducing JavaIntroducing Java

OakOak was developed by Sun Microsystems as was developed by Sun Microsystems as an operating system intended to be used by an operating system intended to be used by common appliances and devicescommon appliances and devices

Oak was renamed Oak was renamed JavaJava in 1995 in 1995 HotJavaHotJava runs programs written in the Java runs programs written in the Java

languagelanguage HotJava is a Java interpreter (it understands and HotJava is a Java interpreter (it understands and

runs Java languages)runs Java languages)

3131

XPApplets and Java InterpretersApplets and Java Interpreters

3232

XPAppletsApplets

AppletsApplets are displayed as embedded objects are displayed as embedded objects on a Web page in an on a Web page in an applet windowapplet window

Use a Java Developer’s Kit (JDK) to write your Use a Java Developer’s Kit (JDK) to write your own Java appletown Java applet

CompilingCompiling changes the file into an executable changes the file into an executable file that can run by itself without the JDKfile that can run by itself without the JDK The executable file is called a The executable file is called a class fileclass file

3333

XPWorking with AppletsWorking with Applets

Attributes of the applet element

3434

XPInserting a Java AppletInserting a Java Applet

To insert a Java applet, use the codeTo insert a Java applet, use the code<applet code=“<applet code=“filefile”>”>

<param name=“<param name=“texttext” value=“” value=“valuevalue” />” />

<param name=“<param name=“texttext” value=“” value=“valuevalue” ?>” ?>

……

</applet></applet>

Where Where filefile is the name of the Java class file, is the name of the Java class file, texttext is the is the

name of an applet parameter, and name of an applet parameter, and valuevalue is the is the parameter’s value.parameter’s value.

3535

XPCreating a Marquee with Internet Creating a Marquee with Internet

ExplorerExplorer An alternative to using an applet to create An alternative to using an applet to create

a box with scrolling text is to create a a box with scrolling text is to create a marquee elementmarquee element

<marquee <marquee attributesattributes>>contentcontent</marquee></marquee>

Where attributes is one or more of the marquee Where attributes is one or more of the marquee

elements, and content is the page content that elements, and content is the page content that appears appears

in the marquee box.in the marquee box.

3636

XPWorking with the Object ElementWorking with the Object Element

The object element is the generic element for The object element is the generic element for any object whose content is stored in a file any object whose content is stored in a file separate from the current Web pageseparate from the current Web page Inline imagesInline images Sound clipsSound clips Video clipsVideo clips Program appletsProgram applets Other HTML documentsOther HTML documents

3737

XPWorking with the Object ElementWorking with the Object Element

Specific and generic elements

3838

XPWorking with the Object ElementWorking with the Object Element

MIMEMIME (Multipurpose (Multipurpose Internet Mail Internet Mail Extension) Extension) names are used names are used to indicate the to indicate the type of data type of data using the type using the type attribute in an attribute in an object element.object element.

3939

XPActiveXActiveX

ActiveX ActiveX attaches desktop applications to attaches desktop applications to Web pagesWeb pages

ActiveX objects are referred to as ActiveX objects are referred to as ActiveX ActiveX controls - controls - similar to Java appletssimilar to Java applets

4040

XPTips for Using MultimediaTips for Using Multimedia

When linking to multimedia, provide a When linking to multimedia, provide a variety of media formats to ensure that all variety of media formats to ensure that all users have access to formats they can useusers have access to formats they can use

Include the file size in links to large Include the file size in links to large multimedia files to notify users with low multimedia files to notify users with low bandwidth connectionsbandwidth connections

4141

XPTips for Using MultimediaTips for Using Multimedia

Do not embed multimedia clips in your Web pages Do not embed multimedia clips in your Web pages unless you are sure that users will be accessing unless you are sure that users will be accessing the pages through a high-speed connectionthe pages through a high-speed connection

Do not insert media clips unless you provide a Do not insert media clips unless you provide a method for users to turn off the clips; if a clip plays method for users to turn off the clips; if a clip plays automatically, allow it to play only onceautomatically, allow it to play only once

Use the embed and applet elements in preference Use the embed and applet elements in preference to the object element because of the broader to the object element because of the broader browser supportbrowser support

4242

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.