Simple guide to HTML 5 video, audio and canvas tags
Take a look at the hottest new web buzzwords
By Peter Wayner | InfoWorld | Published: 16:30, 08 December 2010
The five characters HTML5 are now an established buzzword, found everywhere on the web and often given top billing in slides, feature lists and other places where terms du jour congregate.
Non-programmers who must either manage or work with programmers are even beginning to pick up the term. Just two days ago, someone who can't manage a TV remote explained that he was sure his company's Web presence would be much better because they were using HTML5.
The five characters are in reality just the name of a document that isn't even finished. The W3C, whose job it is to build standard-setting descriptions of web technology, has been contemplating the fifth version of the HTML standard for almost seven years. The latest HTML5 draft may finally become official in 2022, at least according to Ian Hickson, one of the authors who works for Google.
Related Articles on Techworld
That is clearly too far in the future for many bosses and potential clients, who've put the HTML5 buzzword on their checklist. The good news is that most modern browsers have implemented a solid collection of the features, and it's quite possible to put HTML5 to work on your site for users who are equipped with the latest browsers.
The biggest questions center on the newest technologies entering the standard. Many of these have been around for several years in various forms in various browsers, but now that the standard is coalescing, the major browsers are all lining up in support.
The new features can roughly be split into four major areas:
- Flashy new presentation tools. The pun is intended, as the new layers will make it easier for designers to create slicker graphical extravaganzas with a collection of tags. The
<canvas>tags go a long way to replacing Adobe's Flash.
- Data layer. Web pages once required a connection to the web. The new tools for handling data are turning web pages from display mechanisms for distant servers into standalone software applications that store data without a web connection.
- Other tidbits. A surprisingly large number of little ideas are bunching under the umbrella of HTML5, even if they're not in the official specification. New tools for using geolocation information and better organising the presentation of data are all included.
- Little fixes to old approaches. The browsers have never handled every detail in uniform ways. The HTML5 standard cleans up some of the differences.
This article is the first of a series exploring how the browsers and developers are working toward HTML5, beginning with the new opportunities in the presentation layer.
The browser was responsible for deciding how to render the data in the best possible way for the current reader. And the scalable vector graphics set of tags, now often considered part of HTML5, was the right way to draw lines by putting the information in an endless stream of tags.
Alas, artists don't think like computer programmers, and they don't grok the idea of separating the data layer from the presentation layer. When they want to put down a letter or a dab of colour, they want it in one place and they want it to stay there, or the harmony of the design will be forever destroyed.
The solution is the
<canvas> element, an idea that originated with Apple, which incorporated
<canvas> into the WebKit project. From there, it was copied by everyone but Microsoft. Eventually, Microsoft capitulated and added the option in IE9, but only after realising everyone was using a free translation tool that mapped all of the methods from the
<canvas> element into their own version.
Many of the most common routines like drawing a line are now implemented in more or less the same way in all browsers. However, there continues to be a surprisingly large number of areas where the browsers don't produce the same results from the same code. Many of the routines for rendering text and gradients act differently or just crash.
To test the Canvas tags, I built a set of flying links that are animated using a jQuery plug-in written by Graham Breach. The code looks for a set of links in your HTML, then starts drawing them in a cloud that rotates in response to the mouse. It illustrates a few of the actions that can be achieved with the Canvas element.
The code won't work in IE8 and earlier versions of Internet Explorer, which don't support Canvas directly, but it will work if you use a thin translation layer called ExplorerCanvas. This code will turn Canvas calls into code that is understood by the earlier browsers, a technology Microsoft called VML (Vector Markup Lanaguage). This translation layer will be necessary for anyone who needs to support the older but still very common versions of IE.
HTML5 video? and audio
<video> tag looks perfectly innocuous, like an
<img> tag where the pictures move. Anyone can add a video to a page by inserting the
<video> tag, uploading the file to the web server, and putting the right path in the source attribute for the tag. Voilà.
If only progress were that easy. While the format for the tag is always the same, the format for the file varies dramatically. This might not matter if the browsers all supported the same collection of formats as they do with the GIF, PNG and JPG files used to hold still images. But they don't. Everyone has their own idea of which video formats belong and support can change from revision to revision of the browsers.
The most common formats are the Ogg Theora, developed by an open source group, Xiph.org; H.264, built by the MPEG group; and VP8, created by On2, a company recently purchased by Google. There are others, but they don't have as much support. Apple's Safari browser, for instance, displays anything that can be decoded by QuickTime.
All three of the main formats offer pretty comparable results, although video specialists can often find artifacts to argue about. The biggest point of contention is the cost of satisfying anyone who might hold a patent. The H.264 format was one of the most commonly used formats in the past, but it requires payment for patent licences from the MPEG LA group.
As an advantage, there are a number of chips that can speed up reconstructing the pixels from the compressed MPEG file. These can lower the battery consumption of handheld devices like the iPhone.
The On2 patents are now available for use royalty-free, which makes them more desirable for everyone. At this time, no one is publicly discussing patents that might govern the Ogg Theora format, but there are worries that the patents filed long ago may emerge some time in the future, giving the patent holder the right to sue everyone who's been using the format since then.