SouthBeach Tutor: Adding Sounds / Videos

Adding Sounds / Videos

The HTML tag needed to add sounds and videos to web pages is the <EMBED> tag. In order to include a sound file named phil.mid in your web page, you will have to paste the following piece of HTML code: <EMBED SRC="phil.mid"></EMBED> . Similarly, if you want to add the sound file phil.wav to your web page, then you need to place these HTML tags: <EMBED SRC="phil.wav"></EMBED> .

NOTE In GeoCities, file names are case sensitive. Therefore phil.wav is different from Phil.wav .

NOTE For example, if your GeoCities address is http://www.oocities.org/SouthBeach/Port/9923, you could opt to use the following tag: <EMBED SRC="http://www.oocities.org/SouthBeach/Port/9923/phil.wav"></EMBED> . Though it is much longer, it still works the same.

Below is the piece of HTML code for the screen shot above.

My sound... <EMBED SRC="phil.mid"></EMBED>

Simple, isn't it? Well, you could actually specify the size of the console -- the one with the stop and play buttons -- by using the height and width attributes of the <EMBED> tag. Naturally, the height will correspond to the height in pixels of the console while the width will correspond to the width in pixels of the console. So the piece of HTML code given above can be rewritten as

You might wonder how some homesteaders seem to have background music in their web pages. To tell you the truth, their secret is the use of several attributes in the <EMBED> tag.

Above is the piece of HTML code used to play a sound in the background. Notice the addition of the hidden and autostart attributes: Setting the HIDDEN attribute to false makes the console disappear; and just to be sure, the height and width attributes are set to zero as well. On the other hand, setting the AUTOSTART attribute to true enables the song to be automatically played once the page where it is in finishes loading.

NOTE Whenever you use the <EMBED> tag, we strongly encourage you to add an additional tag -- the <NOEMBED> tag. An example of how the latter tag can be used is given below.

<EMBED SRC="phil.mid" HEIGHT="100" WIDTH="250"></EMBED>
<NOEMBED>Your browser does not support the embed tag.</NOEMBED>

The phrase or sentence enclosed within the <NOEMBED> tags will appear whenever a browser does not support the <EMBED> tag, meaning it does not allow the playing of inline sounds and videos.

NOTE Not all versions of Internet Explorer support the <EMBED> tag. So if you're planning to add background sound to your web page that will be audible to Internet Explorer users as well, you might opt to have the following piece of code.

As you can see, the <EMBED> part of the code above is the same as the one we have already discussed earlier. The only difference here is the presence of the <BGSOUND> tag. Well, the tag is Microsoft's way of allowing you to place background sounds in your web pages. Of course, the file that you will place in the SRC attribute of the tag will be the same as the one you will place in the SRC attribute of the <EMBED> tag. So if you have SRC="phil.mid" in the <EMBED> tag, then you should have the same in the <BGSOUND> tag. With the presence of the <NOEMBED> tags in the code above, if ever a version of Microsoft Internet Explorer that does not support the <EMBED> tag is used, the <BGSOUND> tag will be called and consequently the background sound will be heard.

Now what about adding videos? Well, what applies to adding sounds also applies to adding videos. In order to include a video on a web page, simply include the following HTML code: <EMBED SRC="file_name"></EMBED>

where file_name is the name of the video. So, for example, if the name of the video file is sample.avi, then the appropriate HTML tags to be added are the following: <EMBED SRC="sample.avi"></EMBED> . Similarly, suppose the name of the video to be included in the web page is named sample.mov, this piece of HTML code should be added: <EMBED SRC="sample.mov"></EMBED> .

As in adding sounds, the height and width attributes of the <EMBED> tag also apply in adding videos.

Sample Page with Video

Below is the piece of HTML code used for the screen shot above.

For your convenience, here is a summary of all the attributes of the <EMBED> tag that we have discussed.

where start_or_not specifies whether the sound or video automatically starts once the page it is in is fully loaded.
where height_number is the height in pixels of the console that will contain the sound or video.
where hide_or_not specifies whether the console that contains the sound file will be hidden or displayed.
where file_name is the name or the address (URL) of the sound or video file.
where width_number is the width in pixels of the console that will contain the sound or video.

Click on the "next" button to proceed.

Back | Menu | Next

Should you have any comments and suggestions, please e-mail the site administrator. Be advised that GeoCities-related questions will not be entertained in the aforementioned e-mail address. Please direct such questions to SouthBeach Community Leaders.

The copyright for this tutorial belongs to Wilson. Tampering, reproduction or reuse of text and screen shots contained herein without Wilson's approval is prohibited.

Site Administrator is Wilson
Graphics by DJ
Background by JadeRyan
Last updated: September 19, 1999