Home and Learn: Web Design Course

HTML 5 Video and Audio

HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:

This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy:

However, Google does produce the code for you, and all you need to do is copy and paste it.

Another alternative for video is Flash. Unfortunately, not all browsers support Flash (Apple's Safari in particular.) Even for those that do, you need a plugin to watch the video.

So the VIDEO tag in HTML5 was meant to allow all browsers to display your videos. At the time of writing, though, different browsers support different video formats. Older browsers won't recognize the VIDEO tag at all. With those caveats in place, let's take a further look at the video tag.

Video Formats and Codecs

The most popular video formats are MP4 (MPEG4), FLV (Flash), OGG and AVI. A newer format is WebM. But these file endings, .mp4, .flv, .ogv, .avi, and WebM, are not actually a single file. They are known as container files. That's because a video is a combination of separate files, such as the video itself and sound tracks. There will also be files for synchronising the video with the sound, the aspect ratio, the language, video title, and a whole lot more.

The moving images part of the video will be encoded using programming code known as an algorithm. This algorithm is called the video codec. A video player decodes this algorithm (codec) and displays the moving images on your screen. There are quite a lot of video codecs out there, but the most popular are H.264, Theora, and Google's VP8.

As well as video codecs there are also separate audio codecs. The audio codec that just about everybody has heard of is MP3 (short for MPEG 1, Audio Layer 3). Others are Apple's AAC, and Vorbis.

(It must be pointed out that MP4 and MP3 are patent protected. You are usually allowed to produce video and audio files in these formats because a vendor (Microsoft, Apple, etc) has already paid for the right to use the encoder and decoder software.)

With all these different video and audio combinations, you won't be surprised to learn that browser support is patchy. For example, if you wanted to show a Flash video then people who have Macs, iPhones, and iPads won't be able to see it.

Browser patchiness is the reason why the new VIDEO tag takes a sub-tag called SOURCE. The SOURCE sub-tag lets you specify more than one container format. Take a look at this example:

<VIDEO>

</VIDEO>

The VIDEO tag is now by itself. Between the two VIDEO tags, however, we have three SOURCE tags. After the word SOURCE you need a SRC attribute. This is the name and location of your video. Notice that the MP4 format comes first. This is to cater to your iPad users. If it's not top of the list then iPad just bails out - it only recognises one SOURCE tag. Newer version of the iPad may well correct this bug.

Notice the TYPE attribute above, though. It is split in to three parts:

TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '

You need the type of video it is (video/mp4, in this case). After a semi colon you then specify the codecs. The video codec comes first, followed by the audio codec. The two are separated by a comma. The quotation marks are need. The TYPE above is surrounded by single quotes, one at the start and one at the end. The codecs need their own quote marks, which are double quotes above. You can do it the other way round, though:

TYPE="video/mp4; codecs='avc1.42E01E, mp4a.40.2' "

In the line above double quotes are on the outside and single quotes on the inside.

Video can be a very complicated subject. If you don't want to go to all the trouble, then YouTube can convert your videos and provide the code to copy and paste into your web page.

HTML 5 AUDIO

If you only want sound, and no video, then the new AUDIO tag is the one to use. The HTML is similar to the VIDEO tags, in that you specify a list of audio file formats. For example, take a look at the following code:

<AUDIO>

</AUDIO>

Between the two AUDIO tags we have three SOURCE tags like before. This time, however, you don't need any codec information. The browser will try to play the first song on the list above. If the format is not supported, then it will try to play the second song.

You can add some attributes to the AUDIO tag:

AUTOPLAY
LOOP
CONTROLS
PRELOAD

AUTOPLAY takes the value true or false. Setting AUTOPLAY to true means the song would start playing by itself in the browser, which can be annoying. LOOP means that the song will start all over again after it has finished. Again, the values true and false can be used. Using the CONTROLS attribute with a value of true will get you the browser's in-built audio controls. They look like this in Internet Explorer 9:

The PRELOAD attribute takes three values: none, auto, and metadata. PRELOAD refers to the audio file itself. When you set it to none the browser won't preload the file at all. Set it to auto and the browser will decide for you, whereas a setting of metadata will load things like song title, album, artist, etc.

Here's an example of the AUDIO attributes:

</AUDIO>

If you tried the above code in Firefox then the Ogg file format would play, because Firefox doesn't support the MP3 format, due to licensing issues.

For browsers that don't support the AUDIO tag at all, then you can add some text to the above code:

<SOURCE src="your_audio.mp3">
<SOURCE src="your_audio.ogg">
<SOURCE src="your_audio.wav">
YOUR BROWSER DOESN'T SUPPORT THE AUDIO TAG.

</AUDIO>

The point about the AUDIO and VIDEO tags, however, is that they work in the browser and don't need the end-user to download any third-party plugins. Here's a summary of the new tags used in this chapter.

In the next lesson, you'll take a brief look at the HTML 5 canvas tag.

<< Form layouts | HTML 5 canvas tag >>

Back to the Home Page