Download Web Media - Academic Web Pages

Web Developer Foundations:
Using XHTML
Chapter 10
Helper Applications
and Plug-in
Concepts
1
Learning
Outcomes

In this chapter, you will learn about:






Helper Applications and Plug-ins
Audio file types and how to obtain them
Adding sound to a web page
Video file types and how to obtain them
Adding video to a web page
Streaming Media
2
Helper Applications
& Plug-ins

Helper Application



A program that can be designated to handle a
particular file type (such as .wav or.mpg) to allow the
user to view or otherwise utilize the special file.
The helper application runs in a separate window from
the browser.
Plug-In


A newer and more common method
Plug-ins run right in the browser window so that media
objects can be integrated directly into the web page.
3
Commonly Used
Video & Audio Plug-ins
Real Player
 Windows Media Player
 Apple Quicktime

4
Audio
File Types
.wav Wave File
 .aiff Audio Interchange File Format
 .mid Musical Instrument Digital Interface
(MIDI)
 .au Sun UNIX sound file
 .mp3 MPEG-1 Audio Layer-3

5
Obtaining
Audio Files

Audio files can be obtained from various sources:




Record your own sounds or music
Download sounds or music from a free site
Download sounds or music from a site for a fee
Record music from a CD
• A commercial CD can only be copied for personal use and not for
publishing to the Web. Contact the owner of the copyright to request
permission to use the music.


Purchase a CD of sounds or music.
There are some ethical issues related to using sounds and music
created by others.
• Be certain to only publish sounds or music that you have either
created yourself or have obtained the rights (sometimes called a
license) to publish.
6
Using Sound
on a Web Page

Link to the sound
<a href="ringing.wav" title=”Hear a telephone
ring.”>telephone ringing</a>

Embed the sound


You can embed the sound in a page and optionally
display a control panel for the sound
The <embed> tag (example: ch10page1.htm)
• Not part of the W3C standard but commonly used

The <object> tag (example: ch10page2.htm)
• W3C standard but not well supported by browsers
7
XHTML
<embed> tag
<embed src="catch.wav" autostart="false"
controls="smallconsole" height="25" width="100" />
 The embed tag
 A stand alone
tag
 Attributes:








src
controls
width
height
autostart
loop
align
hidden
8
XHTML
<object> tag
<object data="catch.wav " autostart="false" height="50"
width="100" type="audio/wav" ></object>



The object tag
A container tag
Attributes:







data
type
width
height
autostart
loop
hidden
9
XHTML
Background Sound


Internet Explorer supports the <bgsound> tag.
This tag is not supported by other browsers and
should be avoided
Using the <embed> tag to configure a background
sound on a web page: (example: audio3.htm)
<embed src="catch.wav" autostart="true"
hidden="true" loop="true" />
10
Video
File Types
.mov
 .avi
 .mpg

Quicktime
Microsoft Audio Video Interleaved
MPEG (Motion Picture Experts Group)
11
Obtaining
Video Files

Video files can be obtained from various sources:

Record your own
• Digital Camcorder
• Webcam
• Copy video tapes using a video capture card




Download from a free site
Download from a site for a fee
Purchase a DVD of stock videos
here are some ethical issues related to using videos created by
others.
• Be certain to only publish videos that you have either created yourself
or have obtained the rights (sometimes called a license) to publish.
12
Using Video
on a Web Page

Link to the video (example: ch10page4a.htm)
<a href="sparky.mpg" title=”Video of dog
barking”>Sparky! (Caution: long video download)</a>

Embed the video


You can embed the video in a page and optionally
display a control panel for the sound
The <embed> tag (example: video1.htm)
• Not part of the W3C standard but commonly used

The <object> tag (example: video2.htm)
• W3C standard but not well supported by browsers
13
XHTML
<embed> tag
<embed src="sparky.mpg" autostart="false" width="160"
height="120" />



The embed tag
A stand alone tag
Attributes:








src
controls
width
height
autostart
loop
align
hidden
14
XHTML
<object> tag
<object data="sparky.mpg" type="video/mpeg" autostart="false"
width="160" height="120" >A video displaying a cute Pekingese
dog barking.</object>



The object tag
A container tag
Attributes:







data
type
width
height
autostart
loop
hidden
15
XHTML
<img> tag dynsrc attribute
<img dynsrc="sparky.mpg" autostart="true"
width="160“ height="120" alt=”Sparky Video” />


Internet
Explorer Only
<img> tag
dynsrc
attribute is
used to
integrated the
video with the
web page.
(example: dynsrc.htm)
16
Streaming
Media



A disadvantage to a regular audio or video file is that
the web site visitor must wait for the entire file to
download before beginning to experience it.
Streaming media corrects this problem -- it begins to
play almost immediately and uses "buffering" to
capture the next portion of the file download.
Three major components:



Authoring
Distribution
Playback
17
Intro to RealNetworks
Streaming Media Authoring


There are a number of applications created by RealNetworks that can
be used to create streaming media, including RealSlideshow and
RealProducer.
There are two components to every streaming media production:
 the media file itself (.rm file extension)
 the metafile (.ram file extension).
• The metafile
(which means
“file about a file”)
is a text file that
contains a link to
the streaming media file.

Web developers that want to use streaming media code a link to the
metafile (not the media file).
18
Intro to RealNetworks
Streaming Media Distribution


The web server needs software to handle the streaming media – such
as checking connection speed and adjusting the stream to the
available bandwidth. One application is Real System Server 8.
To use a streaming media file with a web page, three files must be
uploaded to the web server:




the media file (.rm extension),
the metafile (.ram extension)
and the web page.
There are two ways to distribute RealNetworks streaming media.


Web host provider purchases and installs a RealServer from
RealNetworks. This will handle multiple users and monitor streaming
rates with the client computers. This is needed for a commercial, heavy
traffic site.
A second option (which is free) is to stream the content using HTTP (the
protocol that web browsers and web servers use to communicate). The
media is transmitted at a preset, constant speed and the stream is not
monitored.
19
Intro to RealNetworks
Streaming Media Playback


Web page visitors whose
browser is equipped with
the Real Player plug-in
will experience your
streaming media.
If the web site is using
the RwalServer, the
stream will be adjusted to
the bandwidth available,
otherwise a constant
stream will be sent.
20
Copyright Issues
and Media Files(1)




It is very easy to copy and download an image, audio,
or video file from a web site.
It may be very tempting to reuse a file in one of your
own projects, but that may not be ethical or lawful.
Only publish web pages, images, and other media that
you have personally created or have obtained the
rights or license to use.
If another individual has created an image, sound,
video, or document that you believe would be useful
on your own web site, ask permission to use the
material instead of simply “grabbing” it.
21
Copyright Issues
and Media Files(2)



All work (web pages, images, sounds, videos, etc.) is
copyrighted – even if there is no copyright symbol and
date on the material.
Be aware that there are times when students and
educators can use portions of other’s work and not be
in violation of copyright law – this is called “fair use”.
"Fair use" is use of a copyrighted work for purposes
such as criticism, reporting, teaching, scholarship, or
research.
22
Copyright Issues
and Media Files(3)

Criteria used to determine “fair use”:
 The use must be educational and not commercial
 The nature of the work
 The amount copied must be as small of a portion of
the work as possible.
 The copy does not impede the marketability of the
original work.
23
Summary


This chapter introduced the XHTML
techniques used to place sound, video, and
streaming media files on web pages.
It also discussed accessibility, usability, and
copyright as they relate to media use on the
Web.
24