DailyDev: HTML5 Video

June 2, 2010

DailyDev day 2 thumbnail imageEditors delight in turning this

Macbeth was very ambitious. This led him to wish to become king of Scotland. The witches told him that this wish of his would come true. The king of Scotland at this time was Duncan. Encouraged by his wife, Macbeth murdered Duncan. He was thus enabled to succeed Duncan as king.

into this

Encouraged by his wife, Macbeth achieved his ambition and realized the prediction of the witches by murdering Duncan and becoming king of Scotland in his place.

(If the example looks familiar, it should. It’s from Strunk and White.)

Developers delight in turning this

<object type="application/x-shockwave-flash" height="320" width="480" data="http://stephencearley.com/video/interviewing.swf" type="application/x-shockwave-flash">
<param value="http://stephencearley.com/video/interviewing.swf" name="movie"/>
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://stephencearley.com/video/interviewing.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>

into this

<video src="http://stephencearley.com/video/interviewing.ogv" controls>
</video>

That’s the markup for HTML5 video. Beautiful, isn’t it? (Be sure and soak it in before reading on. You’ll see why.)

The above code will display a video in the latest versions of Firefox, Opera and Chrome. But that’s it. You need to append the markup for the video to display in recent Safari, iPhone or Android releases. You need to append it further — with that busy Flash object embed from two boxes up — for the video to show in earlier versions of the above browsers, and, crucially, until Internet Explorer 9 comes out next year, in the world’s most popular browser.

If you’re using Firefox 3.5 or above, Opera 10.5, Chrome5 or recent Safari, iPhone or Android browsers, go ahead and check out the

Finished Product

Screengrab of HTML5 video

  • This page includes an annotated version of the full markup as well as the actual video.

If you’re not using one of the above browsers, download one! Firefox, Opera, Chrome and Safari are each free.

If you want to try this yourself, I strongly encourage you to read this chapter from the “Dive Into HTML5” online book. It’s long but totally worth it. It’s extremely informative, covering basics about digital video — starting with the difference between containers and codecs — as well as the HTML5 stuff, and doing it all in a way that’s accessible to n00bs without being condescending.

Pros

  • Even before HTML5 as a whole is officially supported, developers can publish video in a clean, plug-in-free, standards-based format.
  • It’s a way to display video on the Flash-less iPhone/Pad.
  • Videos can be controlled with Javascript for some real nifty interactivity.

Cons

  • Not supported on all browsers yet. No standardized codec.
  • Having to develop for multiple codecs, still create a Flash backup, decreases the net benefit to workflow efficiency.
  • Lots of accessibility potential. But right now, it’s mostly just that, potential.

Tip

  • Use the poster attribute to customize the preview frame. This can be any image — it doesn’t have to be a frame from the video.
<video src="http://stephencearley.com/video/interviewing.ogv" poster="http://stephencearley.com/video/poster.jpg">

Recommend?

  • Yes and no. For the average developer, it’s worth waiting until some of the issues mentioned above get worked out. But, make no mistake, especially with <video> tag support coming in IE9, HTML5 video should be ready for primetime soon. If you choose, you can already view most YouTube videos in HTML5. Vimeo also has an HTML5 player in beta.
Advertisements

One Response to “DailyDev: HTML5 Video”

  1. Sean Smith Says:

    Great article Steve! It’s actually the first tutorial on HTML5 that’s found me. I will definitely be checking out the link to learn more. Thanx.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: