Part of continuing series, looking at what new items are available for web developers with the 5th major revision of the HTML spec. I’ll also try and cover some of the differences to HTML 4.

Audio and Video

It’s no secret that Youtube is successful. Mainly because of this block of code:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/hadxBZWxNrs&hl=en"></param>
<embed src="http://www.youtube.com/v/hadxBZWxNrs&hl=en" type="application/x-shockwave-flash" width="425" height="344">
</embed></object>

It’s how you embed a Youtube video into a web page. Make no mistake, this is a finely honed cross-browser solution that places the funniest piano-playing kitty cat directly on your blog about teeanage angst and mishief.

It’s also a nasty piece of broken code. There are two elements here, one nested within the other so that it works for IE and standards-compliant browsers. Oh, how I wish there were better HTML support for video.

Our semantic savior, <audio> and <video> elements

Here is what a video embed might look like in HTML5.

<video src="http://www.youtube.com/v/hadxBZWxNrs&hl=en"
width="425" height="344" />

Oh that’s much nicer. No double-tag and it’s semantic. There is no questions as to what a video tag does.

Some other cool things is that we can specify alternative sources like this.

<audio controls="false">
   <source src="video_hires.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
   <source src="video_lores.mpeg" type="video/mpeg">
</audio>

What else is cool?

• DOM events and method calls. I can attach to the loadstart event and do something clever like dimming out the rest of the elements on the page with Javascript.
• We can track an amazing amount of information. When a user pauses the playback, if they fast forward or seek, all available to Javascript through the DOM.
• Fallback content and accessibility options let me provide alternatives that make sense to what the user agent is. I could display a transcript if you are viewing the page on a slow network over your cell phone. (Can you say iPhone and EDGE)

Popularity: 26% [?]

Part of continuing series, looking at what new items are available for web developers with the 5th major revision of the HTML spec. I’ll also try and cover some of the differences to HTML 4.

There is so much to cover, I’ll do this in parts. And I’m only going to hit on the few things that I think are interesting:

• First look at new and deprecated elements
• New audio and video embedding methods
• 2d drawing
• Offline web applications
• Web forms 2.0
• The script element
• Session history and navigation
• Data grids
• Details element

Part 1, First look at new and deprecated elements

I really don’t want to re-invent the wheel. The W3C has a good link to what new elements are available. A List Apart has a really well done analysis of what this means to us.

There are some additional new elements that I’ll spend some time on in future articles, for now though check out some of the primers that others have written. I’ll cover canvas for sure. Both datagrid and details are perhaps more interesting than you think. So stay tuned.

Popularity: 100% [?]

I was sweeping the entry way this morning and realized that the broom I was hunched over is eactly 1 foot 4 inches too short for my 6 foot frame. Why?

I’m not sure what international organization is in charge of broom height but it dawned on me today they need to convene an emergency hearing. Something has gone wrong with the process, the standards in place simply don’t account for a large majority of the male population. Who is in charge? I don’t feel like I’m being represented.

I want an organization more like the W3C to take care of broom height. I think they’ve done pretty well. Just look at some of these interesting ones that you may not have heard of before.

• Widgets. You know like Google gadgets or Apple’s Dashboard, or Konfabulator (old skool
• Web Application API. Wanna see what Web 3.0 might turn into?
• SMIL. Ditch PowerPoint, let’s get out the text editor to write a presentation.
• Jigsaw. Who knew the W3C had its own Java HTTP server.
• InkML. One day, your computer can sign your doctor’s notes to get you out of class.
• GRDDL. I really like saying this one but it makes me hungry.
• eGovernment. Dear to my heart since I work at Accenture, how do we make the Government hip to the web?

Popularity: 55% [?]