Internet - Web design

I am a little obsessive when it comes to good markup. I guess it's a laudable goal, to produce markup that should render exactly the same provided you are using a standards compliant web browser. The fact of the matter is that in my case it's probably equal parts that and obsessive compulsive behavior that motivates me.

I was excited when I first read about the HTML 5 specification, and this blog is valid HTML 5. Writing for HTML 5 is very much like writing strict markup, which means you will spend a lot of time hunting down offending entries as the spec is more demanding in your adherence to good practices. What I really liked about HTML 5 at first glance was the ability to deliver audio and video content that was not dependent on some third party browser plugin. Not every user has control over whether or not they can install a plugin on the machine they are using, but if their browser is HTML 5 compliant then that will no longer matter. It's a chance for web developers to make sure all their users can enjoy the rich content they want to embed in their pages.

The following video was embedded using this simple markup:

<p class="center"><video width="352" height="240" controls autobuffer>

<source src="video/ringo.mp4" type="video/mp4"/>

<source src="videos/ringo.ogv" type="video/ogg"/></video></p>

Two files are linked as Safari supports only h624 and Firefox and Opera only support ogg. Chrome handles both. Now the bad news: while the above markup works perfectly in Chrome and OmniWeb (a WebKit browser for OS X), it acts a little wonky in Safari, working properly but not displaying the user controls. Firefox and Opera are both supposed to support the HTML 5 video element with ogv files, but neither works on this example at this time, at least on my Mac. Internet Explorer users have absolutely no HTML 5 support, so don't even worry about IE.

**I am now of the opinion that the Safari issue I am having is something about Safari that freaks out because of the combination of my template and the HTML 5 video markup. I can make other HTML 5 demos on a blank page and Safari treats them properly. Must be something Safari needs to get right in regards to javascript elsewhere on the page and use of HTML 5.

You can see how easy HTML 5 makes it for the web designer to integrate video content. The class attribute is one of my own CSS classes, which I use to center align content. The snippet is valid HTML 5. Here's the code in action:

I was curious whether or not this was as friendly to the end user as it was the web designer, so I launched a process monitor and watched CPU utilization while viewing both this clip in HTML 5, and the Youtube clip on this page. Happily, the HTML 5 video uses less than half the system resources the Flash clip did. This is great news, for not only do we have a means of easily inserting this type of content into our page, it's also more responsible with the end user's resources. Hopefully it won't be long before all the browsers work with this markup and we start seeing more video delivered this way.