Audio

There is a simple way to add sound to your web pages. A background sound can be played whilst a specific page is being displayed, you can play the sound or tune just once, or have it repeat.

To play an audio clip when a page is opened (like this page) use the <bgsound> tag, place it in the <head> section of the page. This command only works in Internet Explorer version 2 onwards.

Be careful not to over use background sounds as they can become irritating!

<bgsound...>

This tells the browser to play a BackGround SOUND. The following attributes modify the <bgsound> tag.

src="audio.wav"

This tells the browser that the sound is a file named audio.wav.

loop="1"

This tells the browser how many times to play the sound. Use loop="2" for example to play the clip twice. To play the clip as long as the page is displayed use loop="-1".

The code for the sound that played when this page opened looks like this:

<bgsound src="vroom.wav" loop="1">

Video

Inserting a video clip into a web page is complicated by the lack of standardisation between browser types and versions. The method described here will allow you to put a video clip in a page that will display properly in most browsers and versions.

With the popularity of Web Cams and mobile phones with cameras you can record moving pictures instead of just scanning still photographs. However just as large still images take a long time to download, moving image files are especially large. A video clip lasting just 20 seconds could take about five minutes to download over a telephone line with a 56K modem. Many people forget the relationship between file size and download time when it comes to video - particularly if they only test their web page using the local copies of their pages on their PC and not the pages stored on the server over the Web.

You can use the <img> tag to insert a video clip

<img...>

This tells the browser to expect an IMaGe. The following attributes modify the <img> tag.

dynsrc="video.avi"

This tells the browser that the image is a file named video.avi.

start="..."

This tells the browser when to start playing the video clip. Use start="fileopen" for the video to play as soon as the page is loaded, or start="mouseover" to play the video when the mouse is moved over the video. If you use "mouseover" it would probably be useful to put some text with the image to let the viewer know that they need to move their mouse over the image to make it play.

loop="1"

This tells the browser how many times to play the video clip. Use loop="2" for example to play the clip twice. To play the clip as long as the page is displayed use loop="-1".

controls

In Internet Explorer version 2 and 3 this will display a control panel for the viewer to control the playback of the video clip.

width  height
alt  border

All work just the same as for a normal image.

The code for a typical video image clip looks like this:

<img dynsrc="snowboard.avi" start="mouseover" loop="1" controls alt="snowboard video clip" border="0" width="256" height="192">

Even small video clips take a long time to download, so one hasn't been included on this page. There is a page with a demonstration video that will open in a new browser window.

Alternatively you can put a hyperlink to your video file that should open the file and display it in the viewers default viewing application. This will allow the viewer to chose whether to view the video or not and allow them to use the application to control the video. It looks like this in the browser: demonstration video

The code for the hyperlink might look like this:

<a href="snowboard.avi">demonstration video</a>