Embedding Objects

Moving forward, we’re going to learn a thing or two about how to embed objects into your HTML document, like sounds and movie clips. Embedding objects makes it easier for you to add multimedia to your website or web pages.
<EMBED > puts a browser plugin in the page. A plugin is a special program located on the client computer (i.e. not on your web server) that handles its own special type of data file. The most common plugins are for sounds and movies. The <EMBED > tag gives the location of a data file that the plugin should handle.
Some attributes used with the <embed> element are:

SRC: URL of resource to be embedded
WIDTH: width of area in which to show resource
HEIGHT: height of area in which to show resource
ALIGN: how text should flow around the picture
NAME: name of the embedded object
PLUGINSPAGE: where to get the plugin software
PLUGINURL: where to get the JAR archive for automatic installation
HIDDEN: if the object is visible or not
HREF: make this object a link
TARGET: frame to link to

AUTOSTART: if the sound/movie should start automatically
LOOP: how many times to play the sound/movie
PLAYCOUNT: how many times to play the sound/movie
VOLUME: how loud to play the sound
CONTROLS: which sound control to display
CONTROLLER: if controls should be displayed
MASTERSOUND: indicates the object in a sound group with the sound to use
STARTTIME: how far into the sound to start and stop
ENDTIME: when to finish playing

Example 1:
You can embed music files into your HTML Document like this


<embed name="BirdChirpingSound"
src="http://www.phcityonweb.com/sounds/Bird-chirps-animals140.wav"
width="300"
height="90"
loop="false"
autostart="false"></embed>

It will look like this on a browser

Click here to see a stand alone working example Example 1

Embedding using the <object> element.
Similarly, Netscape browsers normally uses the <embed> tags only and ignored the <object> tag and that worked just fine, whereas media applications on the web using Internet Explorer required the <object> tags to call in application from the user’s computer to display the media on the web page. Confused?
let’s see some examples shall we!
Example 2:


Using Quick time's plugin from Apple, the object tag code and embed code will look like this
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160"
HEIGHT="144" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" value="http://www.phcityonweb.com/sounds/Bird-chirps-animals140.wav">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<embed SRC="http://www.phcityonweb.com/sounds/Bird-chirps-animals140.wav" width="160" 
height="144" AUTOPLAY="true" CONTROLLER="false"
PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</embed>
</OBJECT>

It will look like this on a browser

Click to see a stand alone working example Example 2
Having the “CONTROLLER” attribute set to “false” Makes the controls for the player invisible. consequently, as you can see from the example, my tag is in Capital letters as well as some attributes such as “PARAM” this because, some browsers won’t detect or rather execute the code properly as a plugin if in small letters. why? because we’re using xHTML standards to code in our website, will discuss about XHTML later on.

Embedding Flash Objects in HTML Document
What is Flash

Flash is a multimedia graphics program specially for use on the Web
Flash enables you to create interactive “movies” on the Web
Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality
Flash does not require programming skills and is easy to learn

To create a movie or animated objects using flash, you must have a Flash program to be able to work with Flash, a 30 days Trial version is available from Adobe. After downloading it, you can install it and start up some simple tutorials on how to use it, many examples are on You tube and some search results from Google, after learning some basic examples, you can begin using Flash on your website.

After creating a Flash movie you choose File > Save As from the top menu to save your movie. Save the file as “MyFirstFlashmovie.fla”. To embed the Flash movie you just made into an HTML page, you should go back to your Flash program and do the following steps:

Choose File > Open. Open a Flash movie you have created.
Choose File > Export Movie.
Name the file “somefilename.swf”. Choose the location where the file is to be stored (in your Web folder). Click OK.
Open the HTML page where you want to insert your Flash movie. Insert this code:

Example 3:


<object width="550" height="400">
<param name="movie" value="Myfirstflashmovie.swf">
<embed src="Myfirstflashmovie.swf" width="550" height="400">
</embed>
</object>

Note: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed.

Note: In the code above there is both an <embed> tag and an <object> tag. This is because the <object> tag is recognized by Internet Explorer, and Netscape recognizes the <embed> tag and ignores the <object> tag.

Embedding media files into your web pages makes it look more professional and attract more visitors to your web site especially when you have beautifully dynamic contents. well, proceed further to learn more, i have set up some basic examples for you, all you just have to do is create something similar. As a web designer or author or developer; anyone which comes first, you should try learning more to develop more skills and as time goes by, you’ll be able to see differences in codes and how it can be applied without any help from any one. Try out the Practical examples to have basic understanding of how to use some HTML codes in your web pages and how you can improve and foster your knowledge in being a web designer or programmer.

Back

Main: HTML Programming

Previous Lesson: Using Scripts

Next Lesson: Practical Examples