tantek.com

How To Embed HTML5 Video With VideoJS And Other Notes From The Open Video Conference 2010 NYC

on (ttk.me b/48d1) using BBEdit

Last month I attended the Open Video Conference (OVC) at the Fashion Institute of Technology in New York City. I was quite impressed with the breadth and depth of the two day program that the organizers put together, covering topics ranging from deeply technical to content creation to rights, politics, and ethics.

HTML5 Flight of The Navigator

I found the "HTML5 player showcase/How to Build an HTML5 player" session organized and moderated by Chris Blizzard particularly useful. Blizzard showed the awesome Flight of The Navigator (video) demo (which I'd seen before at the recent Mozilla Summit) running in Firefox 4 which demonstrated realtime WebGL 3D rendering, HTML5 Video mapped onto said 3D surfaces, HTML5 Audio (with realtime synchronized FFT music visualizations), and even live tweets/photos from Twitter/Flickr tagged #ovc10. Looks like the actual demo source has been posted as well. (Update: demo files are in a bit of flux).

It reminded me of some of the early audio/video multimedia demonstrations that people built with HyperCard (which eventually turned into full-fledged experiences like Myst) and gave me that same feeling of wow this platform has a lot of potential just waiting to be explored. The games of the future will be built with HTML5 + CSS3 + Javascript.

Relating on HTML5 video problems and solutions

Steve Heffernan gave perhaps the most brutally practical mini-tech-talk of the entire conference on the cross-browser/device VideoJS HTML5 video player.

I'm a little familiar with building HTML5 players, having had the honor of building Revision3's HTML5 player this past May which is served to iPads in particular. It is relatively easy to combine <video controls> with existing <object> <embed> to embed a simple cross-browser/device HTML5 video player.

However, once you get into custom controls, or Media API calls for things like progress/playback indicators, segment jumps, and multi-resolution switches (all of which we built into Revision3's HTML5 video player), it gets a lot more complicated and you start discovering browser or device-specific quirks or bugs. Case in point: the iPad runs a very out-of-date fork of WebKit that doesn't at all reflect the implementation level of HTML5 video that's in desktop Safari.

Watching Steve's step-by-step explanation of what problems VideoJS handles, it was like a rewind playback of my own HTML5 video coding forensics and problem-solving experiences during those days at Revision3. But where my work was for a specific client and had a finish/ship date, VideoJS is an open source project constantly evolving. In fact, it was kind of eerie how many different things we both discovered/fixed in the same order, so much so that once he started going beyond that, I was quite willing to accept his answers based on the assumption that he had continued with consistent problem solving rigor.

One might think that I would have a feeling of regret, like if I'd only open sourced my work. Quite the opposite. Every web authoring/coding problem I solve is accompanied by a feeling of responsibility to share what I've learned. But there simply aren't enough hours in the day. I've already got a queue of fixes/solutions for numerous things that I try to go thru and wikitize etc. from time to time.

Thus frankly I was relieved. Steve has done such a great job with VideoJS that I don't have to worry about documenting any of the work I did and solutions I came up with - he's got it covered and then some. There are so many problems to solve, that I'm more than happy to point to others work and say, use this, it rocks, and move onto other problems/solutions of interest.

VideoJS Player

VideoJS is a fully scriptable HTML5 video controller that does its best to work around browser/device-specific quirks and bugs, abstracting that away from the developer.

Start with the embed builder which smartly creates code that encourages good accessibility and declarative fallbacks that work reasonably well even in the absence of Javascript (something that other Javascript HTML5 video players fail to do).

Now all you have to do is include the video.js javascript file on your page, either directly, or incorporate it into one of your existing scripts (reducing server requests). I'm oversimplifying just a bit but those are the important parts to remember. You can also use the nice video-js.css CSS skins for consistent presentation.

Here's just a few of the things that VideoJS takes care of (from Steve's presentation):

There are also several features the VideoJS APIs make easier, like:

For more details on what VideoJS does for you and how easy it is to get started with it, check out the simple straight-forward documentation on the home page:

Why use an HTML5 Video Player?

View on Twitter
♥ Like ♺ Repost ↵ Reply