One of the new features being hyped about HTML5 is support being built into the browser for video and audio. What this means is that you will no longer need to embed a video or audio player on your web page for someone to view your media. While these features are still a long way from becoming a web standard, most of the popular, modern browsers now support them in some fashion. In this tutorial, I will show how you can take advantage of the new HTML5 <video> tag and still be backwards compatible with browsers that do not support it.

I learned about this technique at CamenDesign.com written by Kroc Camen. This web page presents a sample video using the <video> tag, links to further reading, and a list of the browsers and the level of support they provide for the <video> tag. You need to pay attention to the level of support. As you can see from that list, the <video> tag is not fully implemented in all browsers and some bugs still exist. Some browser problems are fixed with nightly builds, but very few of your visitors (if any) will be using nightly builds, so to use the <video> tag now, you will need to use only the bare features of the new tag.

The HTML <video> Tag

Using HTML5, you embed video onto your page between <video> and </video> tags. Since SiteSpinner does not support this HTML tag in its Embed File/Media tool, you will need to use a code object. In its simplest form, the video tag is specified as:

<video src="movie.ogg" controls>
Your browser does not support the video tag.
</video>

When a browser sees this piece of code, and if it recognizes the <video> tag, it will load the movie specified by the src="…" statement. It will also display the movie player controls. Because no width or height attributes were given, the movie will automatically adjust itself to its designed dimensions. If the browser does not recognize the <video> tag or know how to handle it, then the message "Your browser does not support the video tag." is displayed.

The problem with this piece of code is that the browser must also understand how to handle the type of video specified. In the above example, an OGG file type was specified. This format can be used in Firefox, Chrome, and Opera. When Safari sees the <video> tag, it knows what to do with the tag, but cannot display the video because it does not support the OGG file type; Safari only supports the MP4 file type. Thus Safari will just show the player controls and a blank area where the video should be displayed.  Likewise, if the source video was an MP4 file, then Firefox and Opera would not display anything.

In addition to the controls attribute shown in the example there are several other attributes you can use, but not all work reliably.

A fully marked up <video> tag would look like:

<video controls autoplay src="media/movie.ogg" width="640" height="480" 
    preload loop>
Your browser does not support the video tag.
</video>

Pages: 1 2 3 4 5