Multimedia

So, you want to put on things like music, videos, style sheets, javascripts, objects, entities, and such things to your site now that you should have all the bases covered, right?

• To put music on your site, you'll be working with the embed element. Make sure that your music file has a compatible file format first. Here's a list of compatible audio and video file formats.

AVI - .avi Audio/Video Interface used in Windows

WAV - .wav Sponsored by Microsoft and IBM, commonly used on Windows-based PCs

MPEG - .mp3 Part of the Moving Picture Expert Group; uses lots of compression

RMF - .rmf (requires Beatnik player) RMF uses Javascript, but keeps the files really small

MIDI - .mid Musical Instrument Digital Interface contains info for playback of the song

• Now to put an audio/video file on your site, you can either use a simple text link or you can put the actual file on the site. That takes more effort though. Take a look at the example of a text link to a audio/video file. Of course, the video doesn't really exist since I don't have one on here, but you get the meaning.

<a href='my_only_love.mid'>Click here to hear a midi of My Only Love</a>

Click here to hear a midi of My Only Love

• To make the audio/video file appear on the same page, use the embed element. Here's an example below.

<embed src='my_only_love.mid' height='25' width='175' controller='true' autoplay='false' loop='true'>

• As you can see, using the above code, the browser creates a little controller box that lets you either play or stop the music. You can specify the size of this controller using height and width attributes and any value in pixels/percent. The autoplay attribute asks you whether or not you want the song to automatically play or if you want the user to click on the play button when they want to hear it. The values are either true or false. Use true if you want the song to automatically play. The controller attribute asks you whether or not you want visible controls for the music or video. The values are true or false. True makes a controller, but you'll have to specify the size in height in width to accomadate for the height of the video as well unless you are doing an audio file. The loop attribute asks you whether you want the song/video to repeat after it's finished. True makes the song repeat until you stop it. False plays the song once. Palindrom plays the file from the beginning to the end and backwards in a continuous loop.

• Suggested plug-ins you should have if you don't already are Apple Quicktime, Microsoft Windows Media Player, Beatnik Player, and RealPlayer. These can be found at

http://www.apple.com/quicktime
http://www.microsoft.com/windows/windowsmedia
http://www.beatnik.com
and http://www.real.com/products/player

respectively.

• Some multimedia software you might want to have in handy if you don't already are Macromedia Director, Shockwave, and Flash. Director includes the program Aftershock that can generate HTML for Flash Shockwave movies and Java applets to all browsers and platforms. Director is a big package and only necessary for the serious commiter. Shockwave supports audio, animation, and advanced interactive events.

• Macromedia Flash allows you to make compact pictures and files like other programs such as Paint Shop Pro and Adobe Photo Shop. • I won't go much more into detail about multimedia since it's so broad. Embedded objects can range from images, imagempas, applets, multimedia, to things like ActiveX. The object element is called upon to do some of this tedious work. Here's a list of some of its attributes.

classid - Used to point to the location of an object's implementation via a URI.

codebase - Use this attribute to specify the base path for relative URIs specified by other attributes.

codetype - This attribute is used to describe the content type of the data being downloaded. This requires you to include a MIME type and subtype value.

data - Used to specif the location of the object's data. If a relative URI is used, the location will be interpreted relative by that defined in the codebase attribute.

type - Use this attribute to define the type of data specified in the data attribute. Type also asks that you define the MIME type in use.

archive - This attribute can be used to preload archives related to the object in question.

declare - Using declare makes the current object element a declaration. In order to create a real instance, you'll need another object definition.

standby - Here, you can specify a message for the browser to display while the object is being loaded.

• You can use the object element to add images on your page, but it's really unnecessary. That's why it's rarely ever used. Nevertheless, here's an example below.

<object data='hello.gif' type='image/gif'>Hello!</object>

Hello!

• You might be able to see the image the object introduces, but I can't since my browser doesn't support the object element.

• To put Java Applets on a site, you'll need the object element as well. Here's an example of the code. I do not have a Java applet on me at the moment nor do I wish to look for one.

<object codetype='application/java-archive' classid='java:custom.class' width='200' height='200'>If you're browser doesn't support the object element, you will see this text instead.
</object>

• I'm not really going to go into Java applets since I don't have one to show you and you wouldn't understand if I continued to ramble on about this stuff. I will continue with imagemaps.

• Imagemaps are simple ways to create navigational layouts or just links for the matter. Here's an example of an imagemap. This is a composition of three of my fansites. You can click on the picture to view whichever site you want.

<IMG NAME="imagemap0" SRC="imagemap.jpg" WIDTH="287" HEIGHT="405" BORDER="0" USEMAP="#imagemap">
<MAP NAME="imagemap">
<AREA SHAPE="rect" COORDS="0,0,287,110" HREF="http://intoxication.co.nr" TARGET="_blank">
<AREA SHAPE="rect" COORDS="0,108,287,234"
HREF="http://www.geocities.com/rest_in_pieces28" TARGET="_blank">
<AREA SHAPE="rect" COORDS="0,232,287,405"
HREF="http://www.geocities.com/shades_of_grey14" TARGET="_blank">
</MAP>

• If you have a program like Paint Shop Pro 7 like me, you can automatically generate image map html without having to type it all out. Another method of making image maps is to use any kind of image editor that will tell you the coordinates of the picture and hand draw in the coordinates. The boxes you click on can either be rectangle, circle, or polygon.

• That's about all the multimedia I can stand at the moment so this is where the tutorial ends. I hope you learned something out of this bunch of words and pictures. Please do go on to the CSS section, the Javascript section, and the glossary if you want to learn more about such things.

Back