Main  Basic   Advanced  Download  

Multimedia  

Web pages are getting more and more animated, with multimedia effects being common on many of the big sites. The main multimedia components are, in fact, very few, however complicated the effect may be:

  • Dynamic HTML
  • Videos
  • Marquees
  • Blinking Text
  • Sound Clips

Dynamic HTML
Dynamic HTML is HTML which is more actual Scripting using VB Script and JavaScript, to animate and change the properties of, Style Sheets. The next tutorial explains a lot more about it.

Videos
Videos can be put into a web page! Surprised? ok, here's the code, just like inserting images, but with a bit extra:

<IMG DYNSRC="video.avi" SRC="pictureofvideo.gif" WIDTH=46 HEIGHT=46 LOOP=INFINITE ALIGN=RIGHT>

The idea of the DYNSRC tag is to specify the path or name of the video file, and then the SRC tag means that the browser will display an image while the video loads or if it can't support video. (Note: I'm not sure if Netscape browsers support video yet!). The LOOP= attributecan be set to INFINITE, which means it continuously plays the video, or NONE, which means it just plays it once. The default is NONE. You can also put in the CONTROLS attribute, which means the video has a set of controls such as play and pause below the video. Lastly, you can put in the START=attribute, which can be set to ONFILEOPEN or ONMOUSEOVER, which tells the browser when to start the video.

Marquees
Marquees, again, are sadly only an Internet Explorer feature. They scroll text accross a box or bounce it from side to side:

<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200 BGCOLOR="#FFFFFF" ALIGN=LEFT> This is a scrolling marquee. </MARQUEE>

Which gives (Internet Explorer only!):

This is a scrolling marquee.

The MARQUEE tag has quite a few different attributes, and is in fact extremely versatile. The DIRECTION= specifies what direction the text in the marquee should move, RIGHT or LEFT. The BEHAVIOUR= attribute can be set to SCROLL which means the text scrolls on one side and the completely scrolls off the other, SLIDE, which makes the text slide in from one side and then stop once it reaches the other side, or ALTERNATE, which makes it "bounce" of the sides of the marquee. Next, the SCROLLAMOUNT= attribute sets the number of pixels the text should move in one "jump". To make a marquee look smoother set this lower and the SCROLLDELAY= attribute to a very low number. This then means that your page may take a tiny bit longer to load, but it will be worth it if it is a big marquee. The SCROLLDELAY= attribute that I just mentioned specifies the number of miliseconds for each "jump" or redraw of the marquee. The BGCOLOR= specifies the background colour of the marquee, in the sam way as the BODY tag, in RGB hexadecimal triplets. Lastly, like an image, you can also specify the horizontal and vertical margins between it and the surrounding text with HSPACE= and VSPACE= and the number of pixels required. As an afterthought, you can also specify the width in pixels or percentages, as well as the height. If you put normal tags inside the <MARQUEE> tags, they will affect the marquee's text as they would normally affect anything else, e.g. font colour.

Blinking Text
At last, a Netscape only feature! You can blink any text easily using the <BLINK> tag:

<BLINK>Text that you want to blink</BLINK>

Giving (Netscape only!):

Text that you want to blink

That's all there is to it!

Sound Clips
Sound clips can either be background sound or sound clips embedded into the page with even controls. Background sound is one of those only Internet Explorer things, so for Netscape you have to use a looping embedded sound (explained later) to get background sound.

Internet Explorer uses the following code:

<BGSOUND SRC="filename.wav" LOOP=INFINITE>

The SRC= attribute simply specifies the filename you want to play, it could be a Wave file (.wav), MIDI (.mid), or anything you want. The LOOP= attribute can be set to INFINITE or NONE, as well as the number of times you want the clip to loop. If you only want the clip to play three times, then you'd put LOOP=3 in the code.

The other way of having sounds (and indeed videos) play is to use the <EMBED> tag, which, you'll be pleased to know, works in both Netscape and Internet Explorer! The format is very easy:

<EMBED SRC="someclip.wav" HEIGHT=100 WIDTH=55 NAME="myClip" AUTOSTART="TRUE" PALETTE=#000000|#FFFFFF>

The SRC= attribute is simply the filename of the clip (be it video or sound), the HEIGHT= and WIDTH= are in pixels, the NAME= is the name you call it by if you use JavaScript or any other language for it, AUTOSTART= defines whether the clip starts autmoatically when it loads, or else when the controls are clicked, and PALETTE= defines firstly the foreground colour and then the background colour in hexadecimal RGB Triplets.

Ok, so hopefully you now know how to put multimedia in your pages!

 

Copyright 1998 Iceman. All Rights Reserved. Further Legal Stuff

This page hosted by Get your own Free Home Page