HTML Multimedia

Download Report

Transcript HTML Multimedia

CNIT 132 – Week 9
Multimedia
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
Working with Multimedia

Multimedia can be added to a Web page
two different ways:

External media is a sound or 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
Working with Multimedia
Inline media
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).
Working with Audio
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
Sampling Rate
Low sampling rate
Medium sampling
rate
High sampling rate
Sampling Rate, Sample Resolution, and
Channels

Sampling resolution indicates the
precision in measuring the sound within
each sample.



8-bit
16-bit
32-bit
Sample Resolution
Low sample resolution
High sample resolution
Sample Rate and Resolution
Sampling rate and sample resolution as
related to sound quality:
Sampling Rate and Sample Resolution
Sound Quality
8 KHz, 8-bit, mono
22 KHz, 16-bit, stereo
44 KHz, 16-bit, stereo
48 KHz, 16-bit, stereo
(DAT)
Telephone
Radio
CD
Digital Audio Tape
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.
Sound File Formats




WAV
Nonstreaming media
Streaming media
MIDI
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.
Sound File Formats

Nonstreaming media must be
completely downloaded by users before
being played.

May produce lengthy delays
Sound File Formats

Streaming media are processed in a
steady and continuous stream as they
are downloaded by the browser.

Both sound and video
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.
Clinking to an Audio Clip
Inserting links to the sound clips
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
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).
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.
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.
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.
Video File Formats
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.
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.
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.
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.
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.
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
Working with the Object Element
Specific and generic elements
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.
ActiveX


ActiveX attaches desktop applications
to Web pages.
ActiveX objects are referred to as
ActiveX controls.
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.
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.