Downloaded from https:// www.studiestoday.

com

Lesson-3
Customizing & Embedding
Multimedia components in
Webpages
You will learn

Inserting Multimedia files

Inserting Multimedia files in in Webpages
Webpages  Compatible
Multimedia Files
formats
What is Multimedia?
 for Webpages.
Multimedia comes in many different formats. It can be almost  Embedding Audio File.
 Embedding Video File.
anything you can hear or see. Examples: Pictures, music,
 Embedding Flash File.
sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different
types and formats.

Browser Support

The first web browsers had support for text only, limited to a
single font in a single color. Later came browsers with support
for colors and fonts, and even support for pictures!
The support for sounds, animations, and videos is handled
differently by various browsers. Different types and formats
are supported , and some formats require extra helper
programs (plug-ins) to work.

Compatible Multimedia Files formats for Webpages.

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

Common Video Formats

So
un
d
For
ma
ts

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

Embedding Audio File.

Method 1

1. Open your Web page in an HTML editor or Notepad

2. Start with an object element:
<object>

3. You'll add 4 parameters to the object. The first is "src" that tells the browser where to find
the sound file. In this example, the sound file is eureka.wav and is found in the same
directory as the Web page:
<param name="src" value="eureka.wav" />

4. If you want the sound file to play immediately after it's loaded, make the autostart parameter
"true" otherwise make it "false":
<param name="autostart" value="true" />

5. The parameter autoplay is similar to autostart, just used by other browsers, set it the same as
the autostart parameter:
<param name="autoplay" value="true"/>

6. Use the controller parameter to tell the browser if a controller should be displayed to give
your readers more control over the sound:
<param name="controller" value="true" />

7. Inside the <object></object> element, add an embed element:

<embed />

8. Add the following four attributes that are the same as the parameters to the object:
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True" />

9. Add the correct MIME type for your sound file into the type attribute:

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"

type="audio/wav" />

10. Add the plugins page attribute so that people who don't have the correct plugin for your sound
file can go download it. For WAV files, recommended QuickTime:

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"

type="audio/wav" pluginspage="http://www.apple.com/quicktime/download/" />

11. When you're done, your HTML should look like this:
<object>
<param name="autostart" value="true">
<param name="src" value="eureka.wav">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" />
</object>
Method 2

Make a hyperlink directly to the audio file using the following code (change
"audiofilename.wmv" to your own file name):

<a href="audiofilename.wmv">Click here to listen audio </a>

A link is created like this: Click here to listen audio. When the end user clicks this hyperlink,
their Windows Media Player will open and load the audio file for playing.

Embedding Video File.

1. First Upload Your Video to Your Web Server

2. Create your video as a .mov or .mp4 file - and then upload it to your Web server

3. Write down the full URL to your video file - you'll need it when you write your HTML.

4. Use the Object Tag to Embed Your Video Validly

The object tag is not widely supported, but it is the only way to add a QuickTime video into
your pages using valid HTML.

Downloaded from https:// www.studiestoday.com

Downloaded from https:// www.studiestoday.com

There are two attributes that you need to include to get the video to play correctly:

Class id="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase=http://www.apple.com/qtactivex/qtplugin.cab

5. You'll also want to set the width and height of the object - set the width to the width of
the movie and the height to the height plus 15-20 pixels extra to include the controls.

6. Your object tag will look like:

<object width="960" height="555" classid="clsid:02BF25D5-8C17-4B23-BC80-

D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

7. Parameters Make the Object Work

8. The only parameter that you need is the src parameter - this tells the browser where to
find the movie to play. Set the src attribute to the URL of your movie:

<param name="src" value="http://URL to movie.mov" />

9. Some other parameters that can be useful to control your video and make it more user-
friendly are:

 controller - this can be true or false. Remember that most people get very
frustrated if they cannot control multimedia elements on Web pages that they visit.
So I strongly recommend setting this to true.

 autoplay - this can be true or false. Autoplay also annoys customers. They want to
decide when and whether to watch the video. So I strongl recommend setting this
to false.
10. Inside the <object> tag, place the following parameters:

<param name="controller" value="true" /> <param name="autoplay" value="false" />

11. Finally, Include an Embed Tag with the Same Information

If it is very important to you that all your pages validate, then you should not include this
section. But remember that only people with some browsers like Safari and Opera will
be able to view your video.

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

The embed tag should look like this. Note that all the fields are the same as the :

<embed src="http://URL to movie.mov" width="960" height="555" autoplay="true"

controller="true" pluginspage="http://www.apple.com/quicktime/download/"> </embed>

12. And then close the object tag:

</object>

om
Embedding Flash File.

c
y.
Method 1: Using Dreamweaver to insert SWF file to webpage
Dreamweaver is a visual HTML editor with built-in objects that allow you to easily insert Flash

da
content. The required HTML tags are automatically inserted by Dream weaver.

to
1. Copy the SWF file to the same folder as the HTML document.
2. In Dreamweaver, select the location of the page where you wish to add the Flash content
s
(including inside a div, table cell or frame).
ie
3. Click the Insert Flash button in Dreamweaver's Object palette, or choose Insert> Media >
Flash. Browse to and choose the SWF file.
d
4. Upload both the SWF and HTML files to your Web server, placing them in the same directory.
tu

Method 2: Manually adding the proper tags to an existing web page

.s

If you need to incorporate the flash slideshows created by Photo Slideshow Maker into an
w

existing HTML or other type of webpage document, a better way is manually adding the proper
w

tags to the existing page.

//w

Web page must contain tags that reference the actual Flash movie file to be opened and
played. These tags are the <OBJECT> and <EMBED> tags.
s:

The OBJECT tag is used by Internet Explorer on Windows and the EMBED is used by
tp

Netscape Navigator (Macintosh and Windows) and Internet Explorer (Macintosh) to direct the
browser to load the Macromedia Flash Player.
ht

1. Open the PFM-created HTML document in a text or HTML editor

2. Copy the HTML code included in the <object> and <embed> tags (see example below) and
paste it into the existing HTML document. This should contain the <OBJECT> and <EMBED>
tags

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0" width="777" height="528" id="tech" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="showcase/flash/fashionshow.swf" />
<param name="quality" value="high" />
<embed src="showcase/flash/fashionshow.swf" quality="high" width="777"
height="528" name="tech" align="middle" allowScriptAccess="sameDomain"

c om
type="application/x-shockwave-flash"

y.
pluginspage="http://www.macromedia.com/go/getflashplayer" />

da
</object>

In this case, showcase/flash/ is the folder directory, while the fashionshow.swf is the SWF file

to
name.

s
ie
3. Open the existing webpage page, and paste the <object> and <embed> tags into the
desired location in the body of the document. This can also be pasted into a table cell or
d
frame.
tu

4. Edit the attributes of the tags for the movie.

.s

Change the height and width parameters to match the height and width of the movie
w

dimensions or use percentage values, if desired.

w

5. Upload the HTML and SWF files to the same folder on the Web server.
//w
s:
tp
ht

SUMMARY

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

1. Multimedia comprises text, sound, graphics, image and video. Multimedia comes in many
different formats.
2. Pictures, music, sound, videos, records, films, animations are example of multimedia.
3. The first web browsers had support for text only, limited to a single font in a single color.
4. Plug-ins are the extra helper program of web browser.
5. MPEG, AVI, and WMV are example of common video format.
6. MIDI, RealAudio, and WMA are example of audio format.

c om
y.
da
EXERCISES

s to
ie
A. Fill in the blanks:
d
i. Multimedia comprises text, sound, ___________, image and video.
tu

ii. MPEG developed by_____________.

.s

iii. ____________tells the browser where to find the sound file.

iv. The parameter auto play is similar to _____________ just used by other web browser.
w

v. _____________ is visual HTML editor with built in objects that allow you to easily
w

insert Flash content.

//w

B. State true or false:

s:

i. The first web browser had support for flash only.

tp

ii. AVI developed by Microsoft.

iii. To play audio file we place the source in href attribute.
ht

iv. Plug – ins are extra format to play audio in web page.
v. WMA is example of audio format.

C. Short Answer Questions:

Downloaded from https:// www.studiestoday.com

 Downloaded from https:// www.studiestoday.com

i. What is multimedia program?

ii. Name four common video format which is compatible with web pages.?
iii. Write the steps to play an audio file from web page.?
iv. Write the steps to embed video file in web page.?
v. How to import Plug – ins in web page write their steps?

c om
y.
da
to
In the lab
s
d ie
tu

1. Create a web page which has information on Mr. Amitabh Bacchan with one link to the audio
.s

of him. When user click on the given link, it should play Mr.Bacchan voice.
w

2. Create a web page on “Save Tiger” which has some information on tiger with one link to the
w

video. When user click on the given link, it should play video on Save Tiger.
//w

3. Create a web page which has link to the download the missing Plug –ins for the web page.
s:
tp
ht

Downloaded from https:// www.studiestoday.com