Embedding Multimedia
Multimedia like sound, music and video files add some energy and interest to pages. Using code that has been available for years now, you can embed any number of different types of multimedia files.
This page was last updated on 2012-08-21
Downloading Multimedia
It should be said straight off that you can simply allow your multimedia elements to be downloaded from your website using a simple link tag:
<a href="music.mp3">download song</a>
This is sometimes preferable to embedding a file into a page, as it means a reader can move on but continue downloading the file. Once the file is downloaded (either partially or fully, depending on whether it is a streaming media), it will be opened in the appropriate program on the user's computer. All you have to worry about in that situation is whether or not your readers will have the necessary programs. They probably will, but you should offer links to download sites (see the list in the More Resources box down the right).
That said, this tutorial is about embedding, so I'll head straight into that now, but you should always include this method as an option.
sourcetip: The Internet is still a very slow place, and there is a considerable gap between the download speeds of broadband users and us poor modem saps. So whenever possible, offer a large, medium and small file to download, to cater for all readers.
Include the filesize of the file on the page so that we can estimate how long it's going to take to download.
Embedding Sound
Embedding a file means placing it inline, much like how an image is placed on a page. From there it will be played through your browser. Your browser will utilise a plug-in to make this happen.
Plug-ins
Plug-ins are small pieces of software that add extra functionality to their parent software. Your browser will not have the ability to play multimedia files itself, but by using an accompanying plug-in, it is afforded the chance to look like it is handling it all by itself. The plug-in simply works inside the program that is using it, instead of having to bring up a whole new program to handle the file.
Many plug-ins now come with new browsers, and if you ever need another one to play a certain file, like FLash, a box will usually open asking if you'd like to download the plug-in. Users of both browsers should get » QuickTime.
The <embed> Element
Validation Note:
The technique below of using the <embed> tag is not really the best way of doing things. This tag is not part of any official specification, so your page will not validate if you use <embed>. It is certainly the easiest method, but since this was written a number of techniques have been designed to allow valid multimedia embedding.
You should read the rest of this page, as it contains advice on how best to present multimedia content. However, before you implement your page, you should also have a look at Flash Satay and standards compliant Quicktime embedding. On with the show...
<embed> is the tag you'll use to add the multimedia aspects to your page. Here's an example and the code in action:
Yeah, now we're grooving! I love this song (incidentally, this track is oft mistaken for being the music from the infamous » GoldenEye deathmatch level Citadel. For the record, it ain't.). Depending on what program you have set up on your computer to deal with midi files, you should get a scaled-down interface to control the playback. Here's the code that made it all happen:
<embed src="media/citadel.mid" autostart="false" loop="false" height="45" width="170">
<noembed>Sorry, your browser doesn't support the embedding of multimedia.</noembed>
</embed>
Many of the attributes in the embed tag are known to you from the image tag, like height, width, hspace and vspace. There are some new ones too:
autostart="..."- This sets whether the file should start playing straight away. It can be
trueorfalse. If you set it to false the file will not play until the user presses the play button. I would advise that you do let the reader decide when to turn it on, as having a song blaring unexpectedly out of your speakers is usually a bad thing. loop="..."- This specifies whether the file will start again once it has finished and loop for ever, or stop after one play. True or false.
hidden="..."- Again a true or false attribute, this asks whether the controls and progress bar should show up on screen. Taking these away is a bit dangerous though, as if the user has no control over the file, the only way they'll be able to stop it is to exit your page.
You should use the height and width attributes to tailor the box to the file that is being played. You can cut down the width of the control box to get rid of the unnecessary buttons on the right side, and keep only the useful ones in view. Modifying the height makes sure that the video player area doesn't appear. Test your page with a number of different programs set up to take care of the file.
You can use the <noembed> tag like an image's alt attribute, for supplying a user with alternative content if their browser does not support the embed tag (or they've turned the playing of multimedia off in their browser preferences). Capable browsers will skip over the noembed content.
Embedding Video
Embedding YouTube videos
Without all that faffing around with embeds and non-standard code, the easiest way to put a video on your site is simply to upload it to YouTube and then embed their version of the video on your site. On the side of most YouTube pages is a snippet of code that will look something like this:
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/EBM854BTGL0&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/EBM854BTGL0&hl=en&fs=1"
type="application/x-shockwave-flash" width="425" height="344">
</embed>
</object>
Just paste onto your own page and the YouTube Flash video player will appear at that point. This solves most of the compatibility problems that come with embedding a video yourself (below).
Embedding your own videos
To embed a video yourself, which I stress is no longer recommended, you use the same tag and attributes as for a sound. The only differences come in on how you use two of the attributes. For one, don't use the hidden attribute, as this will hide the video along with the controls.
Also, the height and width you set the player's dimensions to should be no less than the actual dimensions that the video was saved in. Otherwise you're downloading a bigger video than you need. If you want to play a video in a space smaller than it is, resize it in a video editor first.
I'm not going to embed a video into this page, as videos are always big files. They also typically take up a fair amount of space on your page. When you are embedding movies, I would advise you to have something else on the page to keep the user's interest. Maybe a title, and some information about the video's content; but the video file should be the main focus. Try to follow some guidelines to keep the content accessible.
Your choice of format is an important one. Should you use .mov, .mpeg or .avi? Personally I would recommend using QuickTime .movs, as the QuickTime player can play in both browsers, and on both PCs and Macs. It also has good compression, meaning a good balance between filesize and quality. When giving a file up to be downloaded, offer the file in multiple formats so that people with different programs can still see the video.
