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

• Inserting Media Objects

6
Media Object Types

• Flash movies or objects
• QuickTime movies
• Audio or video files
• Java Applets
• Anything requiring a plug-in

7
Whats a Plug-in ?

• History early days of web, any file that wasnt
  html needed a plug-in downloaded to view file,
  interrupted web surfing.
• Netscape introduced the idea of plug-ins.
• Special browser extensions that allow the user to
  view non-html/image content.
• Gives browsers ability to view the content right
  in the browser window.

8
Types of Plug-ins

• Downside, plug-ins must be installed by each
  user.
• Upside, most common plug-ins are often
  automatically installed in current browsers.
• QuickTime pre-installed on Macs, PC users that
  have iTunes installed
• Flash plays flash files, 90 installation rate
• Adobe Reader PDF files (portable document
  files)
• May need to direct users to download Real Player
  or Media Player files and others.

9
Linking to media files

• This is a link to an .mp3 file
• This is a link to an .mov file

10
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

11
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

12
Working with Multimedia
Inline media
External media
13
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).

14
Working with Audio
15
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

16
Sampling Rate
Low sampling rate
Medium sampling rate
High sampling rate
17
Sampling Rate, Sample Resolution, and Channels

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

18
Sample Resolution
Low sample resolution
High sample resolution
19
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.

20
Sound File Formats

• WAV
• Nonstreaming media
• Streaming media
• MIDI

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

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

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

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

26
Video File Formats
27
Linking to a Video Clip

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

28
Embedding a Video Clip

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

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

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

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

32
Applets and Java Interpreters
33
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.

34
Working with Applets
Attributes of the applet element
35
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.

36
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

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

39
ActiveX

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