Menu

 

web logo

WEB DESIGN SKILLS

Module Study Guide
2008/09

Copyright © Thames Valley University 2008

Session 13

Multimedia

On this page:

Adding Multimedia Content

So far our web pages have consisted of text and images, with some interactivity added by means of hyperlinks.

But many web pages contain more multimedia elements, in the form of:

Very basic animation can be added in the form of animated GIFs, but all other multimedia content requires additional plug-ins to be installed on the user's browser.

In theory, virtually any format of multimedia file can be viewed/heard on a browser, provided you are prepared to download and install the necessary plug-in. This may not be possible, of course, if you are using a 'public' computer (such as the ones used for this module). In practice, some plug-ins are much more popular than others. Some of the most popular are shipped as default options with the browsers themselves.

Common types of file which can be viewed on most browsers are:

File type Suffix Description
Sound .wav Wave file. Uncompressed. Large file size unless sound clip is very short.
Sound .mp3 MPEG level 3 sound file. Compressed. Usually available for download rather than embedded in a page.
Sound .mid MIDI file. The most compact sound file, but relies on a MIDI-compatible sound card in the user's computer. Music only (no speech).
'Movie' .dcr Shockwave movie created with Macromedia Director.
'Movie' .swf Shockwave Flash movie.
Video .avi 'Audio Video Interleave' video file (Microsoft).
Video .mov Quicktime movie file.

Multimedia content can be prepared using a variety of programs or, of course, downloaded from existing sites (this might not be as easy as you think!).

Multimedia in HTML

The tag most frequently used in the past to insert multimedia content was <embed>. This tag is relatively easy to use, but is a non-standard tag and has never appeared in any official (i.e. W3C) document, despite being supported by all the main browsers.

The recommended tag is <object>, which is much more complicated, and until recently was not supported by all the mainstream browsers. To use it correctly, you need to know a lot about the media type you are planning to use.

Some web design tools employ a 'belt-and-braces' approach by including both <object> and <embed> in the HTML code they produce; <embed> is nested within <object>.

Another alternative is to simply create an ordinary link to a multimedia file. In this case the browser will open a new window to display/play the multimedia file i.e. it won't appear as part of the calling page.

Multimedia in Dreamweaver

Use the 'Insert>Media' menu item. 'Flash', 'Shockwave' (Director) and (Java) applets have their own entries here; all other types will need to use 'Plug In'.

It is possible to use parameters to control how the plug-in handles the item. The most common parameter is "autostart", which can be set to either "true" or "false". A "true" value will cause the sound or clip to begin as soon as it loads; a "false" value will allow the user to control the start of the action (essential if there is more than one sound on a page, for instance). Another parameter is "hidden": if set "true", no controls will appear on the user's screen for the object; if "false", controls will appear. This is mainly used for background sounds on web pages. Note that if "autostart" is "false" and "hidden" is true for a sound file you have a sound that will never play!

Be aware that the use of multimedia content requires extensive testing on different browsers, because of the need for additional plug-ins.

Flash

MacroMedia Flash allows you to create 'movies' which can contain audio, video, animation and interactivity, and has the important advantage that the necessary plug-in is shipped as standard on most new computers, and is readily available free for older versions. (The program itself, of course, is not free.)

Another big advantage is that Flash movies can be any size, so they can take up the whole screen or just a small part of it. A recent trend is to have Flash adverts on commercial sites. (If you see an animated ad on a page, right click on it to see if it is Flash.)

Flash's main drawback is the learning curve required to use it. You cannot simply take a video or audio file, 'convert' it to Flash, and insert it into a web page; you need to understand a little of what the program does and how to use it.

We do not have the time in this module to teach you how to use Flash, but if you are serious about working with web pages, you should make time to get a good book and learn it.

Here are some examples of Flash on existing sites: (links open in a new window)

And if you are interested in learning how to use it, these tutorials might be helpful:

Some examples (and downloads)

The examples are contained on a separate page (to prevent the download of this page from taking too long).

To see these you need to access the online version of this page (http://mercury.tvu.ac.uk/wds/week7.html)

If you want to know more about the use of multimedia on web pages, the Web Style Guide has a good section on its use.

Exercises

  1. Download a sound file from the internet. This could be a MIDI file or an MP3 file. Save it in your root folder or in a special subfolder.
  2. Make an ordinary link to the sound file, as if it were another web page you wanted to link to.
  3. Save the web page you've put the link into and test it on a browser. Can you hear the sound file? (You might need some headphones!)
  4. Use Dreamweaver to embed the sound file within the page. Test again. Can you make it autostart?
  5. Repeat the above with a video file. You might need to do some searching on the internet to find a suitable file you can download. Don't go for anything too big!

Links

(For Flash examples and tutorials see above)

Next session >

Maintained by Alan Rolfe

Last updated June 30, 2008

link to top