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.
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).
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.
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.
- Introduction to HTML5 Video
- Building Custom Controls for HTML5 Videos
- Build a custom HTML5 video player
- HTML for the Pause symbol (in a video control)
Get Creative by Creative Commons is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC BY) license.