Week 2 of HTML5 from the W3C - Creating Videos

Just finished up week 2 of the Learn HTML5 course authored by Michel Buffa and the W3C, and frankly it’s kicking my butt.

It’s my fault. I’m trying to not just passively read the material, but to put what I’m learning to use. Last week, I latched on to microdata, installing a new plugin for my blog, and checking out what kind of meta data it added to the source code.

This week, the focus was on media elements, specifically the Video and Audio elements. Since Audio is basically a subset of the Video element, I focused on playing with the Video and seeing what kind of customization I could do to it.

Default Controls

One of the customizations we learned about in week 2 involved the “controls” bar at the bottom of the video player. You can use the default controls, or you can customize your own.

First, here’s the default video player, using the built-in controls. It’ll look different depending on the browser you’re using, as its ultimately the browser’s job to render the controls in some default fashion. It seems to behave a little erratically, which I suspect may have something to do with embedding it in a WordPress post. Not sure why.

Using the built-in controls is dead-simple, but the caveat is that it allows for very little customization.

<video src="http://mirrors.creativecommons.org/movingimages/webm/GetCreative_360p.webm" poster="http://rack.2.mshcdn.com/media/ZgkyMDEzLzEwLzAxL2U4L2NyZWF0aXZlY29tLjFmYTAxLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/ec501018/64d/creative-commons-logos.jpg"  
       controls="controls" width="400" height="300"></video>

I only had to provide it with a few pieces of information:

  • The source of the video, in this case in the webm format. Ideally, I should provide several formats, since not every browser supports every format, but the major browsers support webm.
  • An image to use as a “poster” before the video plays (optional), instead of defaulting to the first frame of the video (in this case, a boring white frame).
  • The “controls” flag that tells it to display the built-in controls, and the size (so mundane it doesn’t get its own bullet point).

Override Controls

Next, I disabled the default controls, and designed my own. Based on my own limited experience, I’d say you’d have to have a pretty darn good reason for doing this. Once you disable the default controls, you’re committed to creating controls, wiring them up via javascript, styling them via css, and then duplicating efforts to make everything work between browsers.

Speaking of cross-browser compatibility, I did this in Chrome without the slightest consideration of other browsers. It should work in Opera (both use Chromium), but it won’t work (and will look fugly) in IE and Firefox. What can I say? Chrome rulez. :p

Here’s a screen shot – Chrome default on top; mine on the bottom. I was pleased with the results. I even included some closed captions, though only for the first minute of video because it’s really tedious trying to get the timing right.

html5-w3cx-video

You can view the entire html/css/javascript combo on JS Bin.

Okay, it may not look like much, but the last time I used javascript I was creating mouse trailing effects, on a geocities website that seemed to always be under construction…

underconstruction

This is turning out to be a great class; very thorough and lots of extra links in each area for exploring features further. Michel must’ve spent a ton of time putting all of his examples on JS Bin too, which is nice, since it shows all your code and markup at once, and previews your page for you too, and they’re easy to bookmark.

Resources

Get Creative by Creative Commons is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC BY) license.

Subscribe to Weekly Updates!

Get an email with the latest posts, once per week...
* indicates required