Embedding Music and Videos

Inserting music onto a web page is relatively easy. In the past multiple tags had to be used because browsers did not have a uniform standard for defining embedded media files. However, I am glad to announce that this is a problem of the past and you will have a much easier time then webmasters of the past.

Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music, but embed is now considered the standard for inserting media. Below is an minimalist example of the embed tag using the src attribute to define the media file's location.

CODE

<embed src="geniue.mid"></embed>
<p>Above is an embedded media player.
To stop the music press stop/pause.</p>

Depending on what kind of media software you or your visitor has installed, the above example will appear slightly different. To make your embedded player display properly change the attributes associated with display.

EMBED ATTRIBUTES - Related to Display

To customize the appearance of the embedded media player be sure to set the following attributes.

• width - the width of the media player.
• height - the height of the media player
• hidden - if this value is true then the media player will not be displayed. We recommend using this attribute only if you know that your visitors will not want the option to stop the music that is playing on your web page. (Values are true/false)

CODE

<embed src="geniue.mid" width="360" height="165"></embed>

Usually, you do not want to mess with the width and height of the media player as it can cause the media player to look rather distorted.

EMBED ATTRIBUTES - Related to Functionality

To customize the functionality of the embedded media player be sure to set the following attributes.

• autostart - choose if the media file will start automatically. (true/false)
• loop - sets the media file to repeat or not. (true/false)
• volume - set the volume of the media file. The range is 0-100.

CODE

<embed src="geniue.mid" autostart="false" 
       loop="false" volume="60" height="45"></embed>

• Be careful when placing music on your web site. If done poorly, users will be annoyed by the music and will leave your web site
• Only set the hidden attribute if you are certain your visitors will not want to stop the music.
• If you want your music to play over and over again, then be sure to set the loop attribute to true.
• Don't use large music files, It will take longer to play on a slower connection and if users cant turn it off it may take your page longer to render and people will leave.

Note: The <embed> element is supported by both Internet Explorer and Netscape, but it is not a standard HTML or XHTML element. The World Wide Web Consortium (W3C) recommend using the <object> element instead.

INDEPENDANT PRACTICE
Try making your own forms with a mixture of the above inputs for practice on your site and try using the different attributes as well.

Top of page | Previous Lesson| Lessons Index | Finished