HTML for Premies I: Media Linking

← Member Articles


Author: ElderDaniel
VR Publish Date: Oct 07 2005

[ Premies Cheat Sheet ]

VampireRave Premium Members now have access to some cool new features. Not only do these add extra options like email addresses, but this access also allows for the use of some extra HTML tags for Profiles. These tags are normally not allowed by many webforums because they can be abused. This is the case which both additions Cancer has made available. Since you are paying for Premium access however, I hope you will respect their use online.

I will be splitting up my coverage of both major additions into two seperate articles. The next article will cover Cascading Style Sheets, or CSS, which is used to spruce up your Profile page. This article however deals with another feature just for Profiles, the embedding of music and/or video files into your profile.

First, I'll talk about the different standards for media. Then I will give a breakdown of each method for embedding media, from easiest to most complex. Please note, as this file is in my journal, I cannot have working examples. I'll include some in my profile, but for now, you'll just have code samples and will have to try them yourself on your profile to test them out.

Also, don't forget, all of the media files that you want to embed need to be hosted on other servers and linked with full web addresses to those other sites.

Web-browser standards
There aren't any. OK, that's sarcasm, but it ain't far from the truth. Fact is, there are too many standards and the best you can do is pick popular ones and hope for the best. For example, there are a dozen sound file formats, but most browsers will gladly play .MID, .WAV, or .MP3 files for you.

.mid or MIDI files are an old standard for programming external music synthesizers that were also adopted for playing music on a PC. These consist of text files that tell which note, sustain, and duration to play. These files sound "synthesized" or "canned" and have no sung lyrics as a result. Their chief benefit is wide public availability and compact size.

.wav files were developed my Microsoft for playing sound and music on Windows. They are sampled data straight from a sound source. Depending on the quality they are sampled at, these can be quite large; roughly 10MB per minute of CD quality audio. These can be good for sound bytes on the order of a few seconds. Anything longer will take forever to download and a user may give up waiting.

.mp3 files are compressed .WAV files. They employ MPEG-3 compression to squeeze an audio file down to roughly 1MB per minute of audio sampled from a quality source like a music CD. Thanks to this technique, people can share music, take it with them in personal players, and play them on their webpages. Still however, they can be too large for some people to wait for.

That's just the music standards, and that doesn't even include popular proprietary formats like RealAudio, WindowsMedia, etc.! For video you have .AVI, .WMV (WindowsMedia), .RM (RealPlayer), and .MOV (QuickTime), to name a few. All of these standards are what lead to some websites having links to more than one of these formats. If you plan to embed a media file, you might try to do the same -- assuming you have it in more than one of these formats.

To complicate matters further, there is more than one way to embed media into HTML. This is due to early attempts being surpassed by new techniques, and different browsers trying better ways. What follows is an explanation of each type and why you might choose to use it. All four of these HTML Tags are available to Premium Members only, and only in Profiles. These will not work in the forums, journals, etc.

The tag is just for playing a sound file in the background while browsing your page. It offers no controls for starting or stopping and you can only play the one song. It can play MIDI, WAV, and MP3 music and sound files. It is very simple but does the job. Newer browsers prefer the later tags over this one, but it should be recognized by all browsers even when the newer ones aren't.

The tag basically embeds a small media player into your page and gives you limited control over how to play a file.
I prefer to provide the options and let the user choose to play the sound, how loud, etc. However, if you want the sound to play only in the background, make sure HIDDEN=true, AUTOSTART=true, and AUTOPLAY=true. Here's the details.

This sets whether the plug-in is visible. The default is false, so it will be displayed.

This sets whether the plug-in will start automatically. (This is not the same as playing the music automatically.) The default is false, so it will not function until the control is clicked.

This sets whether the media will play automatically. The default is false, so it will not play until the play button is clicked.

This sets whether the media plays in an infinite loop. The default is false, so it will play only once.

MIDI Example
(Substitute WAV or MP3 if you have them instead)
&ltEMBED NAME="YourSong"
HIDDEN="false" AUTOSTART="true" AUTOPLAY="false"
LOOP="true" VOLUME="100%" CONTROLS="all" >

RealPlayer Example
(Note CONTROLS="ImageWindow", as this is how you hide the controls. If you want them active, set this to "all".)
&ltEMBED NAME="YourSongReal"
CONSOLE="YourSongReal" CONTROLS="ImageWindow"
WIDTH="200" HEIGHT="150"
AUTOSTART="true" AUTOPLAY="false" >

QuickTime Example
(Note with this one, the PLUGINSPACE tells your browser where to download the QT player if you don't already have it.)
&ltEMBED NAME="YourSongReal"
CONTROLLER="true" WIDTH="160" HEIGHT="144"
AUTOSTART="true" AUTOPLAY="false" >


The tag is really just a full-blown version of the tag. It provides the power to embed virtually any kind of media object or ActiveX control onto a page and provide the ultimate level of control to that object. It is specific to MSIE so it isn't supported by every browser. It you place any HTML text between and tags, that alternate text will be displayed in the case where an OBJECT can't be run. This is why you may find an tag here to cover both bases. An OBJECT may be overkill for playing something like an MP3 file, but it is the best way to play RealPlayer, QuickTime, Flash, or anything that requires a plug-in.

Along with the tag, the tag lets you add options to your object. You only need to include the paramters that you need to control your object. Not all are needed for various media files, and many have defaults that can be skipped.

What makes the tag so powerful is the unique CLASSID identifier codes for each media type. These are the codes that they are registered with on the user's Windows Registry. If the user's PC does not have the ActiveX program (or Netscape plug-in, etc.) to play them, the browser will attempt to install it. The ID field for each OBJECT is just a unique name on your webpage for that object. If you only have one, you don't have to name it; this is used in the case where you might have more than one and they need to have different names. A case for this is if you have a RealPlayer and WindowsMedia file on your page, or you have one for High Bandwidth and one for Dialup, etc.

MIDI Example
VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.mid" />

WAV Example
VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.wav" />

MP3 Example
With simple controls turned on.
VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.mp3" />

RealPlayer Example
The controls parameter should have the value "ImageWindow" if you don't want the control buttons to show, or "All" if you want all the controls to show.
VALUE="http://www.YourWebsite.com/YourPathTo/YourVideo.rm" />

WindowsMedia Example
VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.wmv" />

QuickTime Example
WIDTH="160" HEIGHT="144">
VALUE="http://www.YourWebsite.com/YourPathTo/YourVideo.mov" />


To see this in use, visit my Portfolio's Slideshow; a sweet option Cancer added to all Portfolios. The music plays on the Slideshow page, and uses an IFRAME to open a page that refreshes after a set number of seconds to display the next photo in my portfolio. Only the contents of the IFRAME refresh, not the IFRAME or the main page itself.

Putting this all together, let's say you wanted to play a MIDI file on your webpage. To cover all bases you will want to use an tag wrapped around a . This should ensure at least one of these tags will be used.

VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.mid" />

AUTOSTART="false" AUTOPLAY="false" LOOP="true" VOLUME="100%" CONTROLS="all" HIDDEN="false" BORDER="0">

This will work for MIDI, WAV and MP3 files. Anything more sophisticated listed above, then remove the tag, and use one of the above tags wrapped by an tag from above.

Let me wrap up with a reminder... Please do not link to copyrighted music or videos that you do not own the rights to. Just because you found it on the web does not make it legal. You will just open yourself up to a nasty legal barrel of crap if you choose to do so. VR has made the warnings known. If you choose to violate this, you take on the risk. Freedom of choice and extra options require responsibility. There's my 2¢.

Enjoy the Rave,
The Elder Lurker Daniel

Times Viewed: 16,355

Times Rated:1,274

1 2 3 4 5 6 7 8 9 10

Optional comment:

Jan 16, 2024


Nov 17, 2023


Sep 14, 2023
Real vampires love Vampire Rave.

© 2004 - 2024 Vampire Rave
All Rights Reserved.
Vampire Rave is a member of 
Page generated in 0.062 seconds.

I agree to Vampire Rave's Privacy Policy.
I agree to Vampire Rave's Terms of Service.
I agree to Vampire Rave's DMCA Policy.
I agree to Vampire Rave's use of Cookies.