Using Multimedia on the Web

1
Using Multimedia on the Web
Tutorial 8

• Enhancing a Web Site with Sound, Video, and
  Applets

2
Objectives

• Working with Multimedia
• Working with Audio
• Linking to an Audio Clip
• Embedding an Audio Clip

3
Objectives

• Working with Video
• Linking to a Video Clip
• Embedding a Video Clip
• Using a Dynamic Source
• Supporting Non-Embedded elements

4
Objectives

• Introducing Java
• Working with Applets
• Creating a Marquee with Internet Explorer
• Working with the Object Element

5
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

6
Working with Multimedia

• Multimedia can be added to a Web page two
  different ways
• External media is a sound of video file thats
  accessed through a link.
• Useful for a low bandwidth
• Inline media is placed within a Web page as an
  embedded object

7
Working with Multimedia
Inline media
External media
8
Working with Audio

• Every sound wave is composed of two components
• Amplitude- the height of the wave. Amplitude
  relates to the sounds 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).

9
Working with Audio
10
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 sounds amplitude
  at discrete moments in time.
• Each measurement is called a sample.
• Samples per second taken is called the sampling
  rate

11
Sampling Rate
Low sampling rate
Medium sampling rate
High sampling rate
12
Sampling Rate, Sample Resolution, and Channels

• Sampling resolution indicates the precision in
  measuring the sound within each sample.
• 8-bit
• 16-bit
• 32-bit

13
Sample Resolution
Low sample resolution
High sample resolution
14
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.

15
Sound File Formats

• WAV
• Nonstreaming media
• Streaming media
• MIDI

16
Linking to an Audio Clip
Inserting links to the sound clips
17
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

18
Playing Background Sounds

• Internet Explorer (with Version 3.0) introduced
  an element to play background sounds
• ltbgsound srcurl balancevalue
• loopvalue volumevalue /gt
• 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.

19
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.

20
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.

21
Video File Formats
22
Linking to a Video Clip

• Follow the same procedure to link a video clip as
  you would to link a sound clip.

23
Embedding a Video Clip

• Use the same embed element to embed a video file
  as you did to embed a sound clip.

24
Using a Dynamic Source

• To turn inline images into dynamic video clips,
  use the following syntax
• ltimg srcurl dynsrcurl starttype
• loopvalue controlcontrol /gt
• 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.

25
Supporting Non-Embedded Elements

• To provide alternate content for browsers that
  dont support embedded objects, use the code
• ltembed attributes /gt
• ltnoembedgt
• alternate content
• lt/noembedgt
• where alternate content is the content displayed
  by browsers that dont support embedded objects.

26
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)

27
Applets and Java Interpreters
28
Applets

• Applets are displayed as embedded objects on a
  Web page in an applet window.
• Use a Java Developers 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.

29
Working with Applets
Attributes of the applet element
30
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.
• ltmarquee attributesgtcontentlt/marqueegt
• Where attributes is one or more of the marquee
• elements, and content is the page content that
  appears
• in the marquee box.

31
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

32
Working with the Object Element
Specific and generic elements
33
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.

34
ActiveX

• ActiveX attaches desktop applications to Web
  pages.
• ActiveX objects are referred to as ActiveX
  controls.