Adding Audio and Video to Your Web Site Using HTML

Sometimes occassions arrive that prompt a webmaster to want to add audio and/or video clips to their web site. May be you're a local musician and want to include your music on your web site. Maybe your company wants to have a video welcome from their President on their web site. Either way, knowing how to handle the presence of video and audio clips is a plus for any webmaster.

In this tutorial I'll cover audio and video clips that have already been uploaded to your web site. If you need to know how to create and edit such clips, this tutorial won't be able to help you. Additionally, we will not cover streaming audio or video, so if you're looking to run a live-cam or radio station through your web site, you should look elsewhere.

A few things to keep in mind when dealing with audio and video clips on the Internet:

• First thing's first, make sure your host allows media (audio/video) files. Not every host does.
• Media files tend to be large-sized files that consume a lot of bandwidth. Bear this in mind when choosing what media clips to include on your site.
• Copyright law prohibits use of copyrighted media files (including many music and movie clips) without permission from the copyright owner. Spare yourself legal difficulties and only upload files you're positive do not violate anyone's copyright. If in doubt, consult an attorney.
• Audio and video files come in many different formats. Not all computers support all formats. The most commonly supported media file types at this time are .mp3 (audio) and .mpeg (video - also written as .mpg), but even support for these file types is not universal. The only way to get around this is to offer all of your media files in multiple formats and let your visitors choose which file type to download. The downside to this of course is more uploading for you, possibly greater bandwidth consumption, and still no guarantee that everyone can view your files.

With that out of the way, let's move on to the easy part. If you remember how to create a link using HTML, you already know how to add media files to your web site. Just take a look at the code below.

An Explanation of the HTML

Placement and Format: Audio and video files are formatted and placed using the same rules as shorthand intra-site links. If you need a refresher head back over to our linking tutorial. They serve merely to tell your visitors computers to head over to the specified file.

You'll notice the link goes to a file, rather than a specific page. Users will have the option of downloading the file and saving it to their computers or opening the file from your site with their audio/video software. Either way, the page that this link opens will be a blank one.

To retain your visitors you'll probably want to spawn the media clip in a new browser window. That way when they're done downloading or viewing the clip they will still have your site's content page open. HTML provides a simple piece of code for this. Let's look at the code in the textarea below.

An Explanation of the HTML

Placement : Same as detailed in the above section of this tutorial.

Format : Rather than close the tag after the file specification (music.mp3") you enter space, the word target, equals sign, quote, new, quote, >. This tells your visitors to open your file in a new window (the new window being the target window). The page they are on will remain open and static as the file launches in a new browser window.

An Issue With the New Window Tag : Sometimes visitors with pop-up blocker will experience difficulties in opening pages in new windows. You should state in your link text that the link opens in a new window. This allows your visitors to adjust their pop-up blocker settings accordingly.