1

Web Developer Foundations: Using XHTML

Chapter 10Helper Applications and Plug-in Concepts

2

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

3

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.

4

Commonly UsedVideo & Audio Plug-ins

Real Player Windows Media Player Apple Quicktime

5

AudioFile 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

6

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

7

Using Soundon 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

8

XHTML<embed> tag

The embed tag A stand alone

tag Attributes:

src controls width height autostart loop align hidden

<embed src="catch.wav" autostart="false" controls="smallconsole" height="25" width="100" />

9

XHTML<object> tag

The object tag A container tag Attributes:

data type width height autostart loop hidden

<object data="catch.wav " autostart="false" height="50" width="100" type="audio/wav" ></object>

10

XHTMLBackground 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" />

11

VideoFile Types

.movQuicktime .avi Microsoft Audio Video Interleaved .mpgMPEG (Motion Picture Experts Group)

12

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

13

Using Videoon 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

14

XHTML<embed> tag

The embed tag A stand alone tag Attributes:

src controls width height autostart loop align hidden

<embed src="sparky.mpg" autostart="false" width="160" height="120" />

15

XHTML<object> tag

The object tag A container tag Attributes:

data type width height autostart loop hidden

<object data="sparky.mpg" type="video/mpeg" autostart="false" width="160" height="120" >A video displaying a cute Pekingese dog barking.</object>

16

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)

17

StreamingMedia

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

18

Intro to RealNetworksStreaming 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).

19

Intro to RealNetworksStreaming 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.

20

Intro to RealNetworksStreaming 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.

21

Copyright Issuesand 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.

22

Copyright Issuesand 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.

23

Copyright Issuesand 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.

24

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.