Using Multimedia on the Web Tutorial 8 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Objectives Working with Multimedia Working with Audio Linking to an Audio Clip Embedding an Audio Clip Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Objectives Introducing Java Working with Applets Creating a Marquee with Internet Explorer Working with the Object Element Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

Working with Multimedia Inline media External media Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Working with Audio Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

Sampling 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, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Sampling Rate Low sampling rate Medium sampling rate High sampling rate Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Sample Resolution Low sample resolution High sample resolution Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 Telephone 22 KHz, 16-bit, stereo Radio 44 KHz, 16-bit, stereo CD 48 KHz, 16-bit, stereo Digital Audio Tape (DAT) Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Sound File Formats WAV Nonstreaming media Streaming media MIDI Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Sound File Formats Nonstreaming media must be completely downloaded by users before being played May produce lengthy delays Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

Linking to an Audio Clip Inserting links to the sound clips Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive Video File Formats Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

Supporting Non-Embedded Elements 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 HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

Applets and Java Interpreters Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 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 HTML, XHTML, and DHTML, Comprehensive

Attributes of the applet element Working with Applets Attributes of the applet element Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

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 Inline images Sound clips Video clips Program applets Other HTML documents Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

Working with the Object Element Specific and generic elements Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

New Perspectives on HTML, XHTML, and DHTML, Comprehensive ActiveX ActiveX attaches desktop applications to Web pages ActiveX objects are referred to as ActiveX controls Tutorial 8 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive

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 HTML, XHTML, and DHTML, Comprehensive