1 Multimedia on the Web: Issues of Bandwidth 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. The higher quality the media, the larger the file size and the longer the load time.

2 Adding Multimedia to a Web Page Modern multimedia can be added to a Web page two different ways: – and tags (HTML 5) – and tags (HTML 4.01) The old-fashioned way is no longer popular.

3 Audio Media: Basic Definitions Every sound wave is composed of two components: –Amplitude- the height of the wave. Amplitude relates to the sound’s volume –Frequency- the speed at which the sound wave moves. Frequency relates to sound pitch

4 Digitizing Audio Sound waves are analog functions (represent a continuously varying signal) To store the information digitally, however, it must be converted to discrete pieces of information. The quality of the conversion is measured in two ways: sampling rate and sampling resolution.

5 The Sampling Rate Digital recording measures the sound’s amplitude at discrete moments in time Each measurement or slice is called a sample Samples per second taken is called the sampling rate, measured in Khz. Low sampling rate Medium sampling rate High sampling rate

6 Sampling Resolution Sampling resolution indicates the precision in measuring the sound within each sample. Resolutions include: –8-bit –16-bit –32-bit

7 Sample Rates and Resolution Sampling rate and sample resolution as related to sound quality: Sampling Rate and Sample ResolutionSound Quality 8 KHz, 8-bit, monoTelephone 22 KHz, 16-bit, stereoFM Radio 44 KHz, 16-bit, stereoCD 192 KHz, 24-bit, 5.1 channelBlu-Ray High Def DVD

8 Some Popular Audio Media Formats There are different sound file formats used by different operating systems:  AIFF – developed for Apple Macintosh OS  WAV – developed for Microsoft Windows OS  RealAudio – developed for realtime Web apps  AU – developed for UNIX OS  MP3 – primary format for music sharing  MIDI – limited to instrumental music  OGG – royalty-free but not very popular

9 Streaming vs Nonstreaming Media Nonstreaming media are completely downloaded by users before being played. It may produce lengthy delays Streaming media are processed in a steady and continuous stream as they are downloaded by the browser

10 The HTML5 Tag To add an audio clip under HTML5, use the audio tag: … where url1, url2, etc. are the possible sources of the audio. Example:

Attributes Attributes

Example: Using the controls Attribute

Audio in HTML 4.01 Using Audio in HTML 4.01 Using Older browsers that don’t support the HTML5 tag instead rely on plug-ins to play embedded media clips using the tag. <embed src=”overture.mp3” type=”audio/mpeg” width=”250” height=”10” />

14 Video Media: Basic Definitions 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. Reducing the frame rate and frame size reduces the size of your file.

15 Codecs and Video File Formats Codecs are programs that compress and decompress the video to control the file size.

16 The HTML5 Tag To add a video clip under HTML5, use the video tag: … where url1, url2, etc. are the possible sources of the video. Example:

Attributes Attributes

Video in HTML 4.01 Using Video in HTML 4.01 Using The tag was introduced in the specifications for HTML 4 for the purpose of marking any kind of nontextual content. Parameters are passed using the tag. <object data=”fun.swf” type=”application/x-shockwave-flash” width=”300” height=”200”>

19 YouTube: An Example of Nesting Elements <param name="movie“ value=" <embed src=" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">

20 Embedding Applications with Java Objects 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, a Java interpreter, runs programs written in the Java language

21 Java Applets Applets are Java programs that run within a Web browser. Applets are displayed as embedded objects on a Web page in an applet window. Parameters are passed to the applet using the tag. You 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 (e.g., CreditRoll.class ).

Using to Insert Java Applets To embed a Java applet, use the element: <object type=”application/x-java-applet” width=”value” height=”value”> parameters for the applet Parameters are specific to the applet you’re inserting. There may be many, a few, or none.

Example of a Java Applet: CreditRoll <object type=”application/x-java-applet” width=”250” height=”250”>