With the advent of HTML5 and the additional tags it provides, we now have a relatively easy solution to the problem. This requires no additional programming language, no bulky objects to import, and even gracefully failing however you'd like (instead of an Adobe message). With the new <audio> and <video> tags, you are able to embed multimedia onto your web page and you get some fairly decent control over how they're displayed and used.

Let's take a quick look at how to embed audio with its corresponding tag:

	<audio src="media/audio1.ogg">
		<p>Your browser does not support the audio element.<br />
			Please upgrade your browser or choose a better one!</p>
	</audio>

The code above simply put an element onto the page that has the capability to play a track. The main problem with this code is that it doesn't actually display anything! Let's fix this rather large problem by specifying that we'd like controls displayed for our audio object:

	<audio src="media/audio1.ogg" controls>
		<p>Your browser does not support the audio element.<br />
			Please upgrade your browser or choose a better one!</p>
	</audio>

Here, you will see the default GUI for controlling the audio file provided through the Theora website. You may now hit play and listen to your music file.

To display video content on your page, the process is strikingly similar:

	<video src="media/video1.ogg" controls>
		<p>Your browser does not support the audio element.<br />
			Please upgrade your browser or choose a better one!</p>
	</video>

If you currently find yourself without any video files to play with, don't fret. Theora will once again provide you with something invaluable: A video. Just replace the above 'src' value with: http://v2v.cc/~j/theora_testsuite/320x240.ogg

Please note that the default controls for the video are coming from Gecko.

Now we have a simple way to play audio or video on our web pages. Let's take a look at some of the attributes that we can use in order to get more control over each of these elements.

preload -

  • none – This specifies that the audio or video should not be preloaded. There are multiple reasons for this, including cutting down the bandwidth that impacts your server.
  • metadata – This will tell the browser to fetch the metadata (ei - the length) for your media. It will not preload the entire media.
  • auto – This indicates that the entire media file could be preloaded if the browser isn't busy handling other actions.

autoplay – A Boolean attribute that tells the browser to begin playing your media as soon as it can.

loop – A Boolean attribute that specifies whether your media should loop once it reaches the end.

volume (audio-only attribute) – Defines the initial volume of your audio file. This attribute may be set from 0.0 (silent) to 1.0 (loudest).

poster (video-only attribute) – A URL to an image file that represents a portion of the video, or whichever image you'd like to display for a video.

The <source> tag

Different browsers support different types of media files. So what do you do if you want to make sure that your video can be played on any kind of browser? You use the <source> tag.

	<video controls>
		<source src="/media/video1.ogg" type="video/ogg">
		<source src="/media/video1.mp4" type="video/mp4">
		<p>Your browser does not support the audio element.<br />
			Please upgrade your browser or choose a better one!</p>
	</video>

This HTML will provide the browser with two different formats to choose from. A list of which browsers support which types can be found here https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats. The browser will use the first filetype that matches a supported encoding and use that for your media file.

Specifying Types

As seen in the previous example, you can specify the filetype of the media you're displaying. It is a good idea to always include this in your <source> tag in order to save your server some extra work. If no type attribute is used, then the browser will retrieve that information for each file you're trying to load. Once it finds a filetype that it can handle, it will load that. As every web developer knows, page load time is an extremely important factor of every website.

Playing Excerpts

You may even play portions of your media simply by providing a hash mark. To do this, you would add a hash for each time (start and end) appended to the URL of your audio or video file. Let's say that you only want to play 10 seconds of the audio file that you have, starting at 0:38. In order to to this, you would simply use this code:

	<source src="/media/video1.mp4#t=38,48" type="video/mp4">

You have two options for specifying the start and end times. You can pass the seconds to the browser as a floating-point value, or you may specify an integer separated with colons in hours:minutes:seconds format. An example of the latter option with the same time frame as the previous example:

	<source src="/media/video1.mp4#t=0:00:38,0:00:48" type="video/mp4">

There is always more to learn, and the landscape is forever changing. I encourage you to go out and learn more on your own, keep up to date with the specs, and always keep your eyes to the future. The best way to keep your web pages looking good is to continue investigating best practices!

Now go out there and make the web a beautiful place!