Date post: | 22-Dec-2015 |
Category: |
Documents |
View: | 216 times |
Download: | 1 times |
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
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).
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
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
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
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)
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
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
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