Resolution switching between 'n' number of streams

[onyxrev]

I'm a freelance developer hired by Vidcaster to implement resolution switching ala YouTube in VideoJS. Here's my contribution:

Here's how to specify multiple streams:

<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'> <source src="http://video-js.zencoder.com/oceans-clip_hd.mp4" type='video/mp4' res="HD"> <source src="http://video-js.zencoder.com/oceans-clip_sd.mp4" type='video/mp4' res="SD" default="true"> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'> <p>Video Playback Not Supported</p> </video>

Or if you're passing in the sources programatically:

myPlayer.src([ { type: "video/mp4", src: "http://www.example.com/path/to/hd_video.mp4", res: "HD" }, { type: "video/mp4", src: "http://www.example.com/path/to/sd_video.mp4", res: "SD", default: true }, { type: "video/webm", src: "http://www.example.com/path/to/video.webm" }, { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" } ]);

A limitation of the implementation is that only homogeneous video types are resolution switchable. So you can't specify a webm SD and an mp4 HD and expect the player to pick it up. That might be correctable, but it might involve changing player "technologies" mid-play ie. HTML5 -> Flash. Technically my implementation does restart the tech on resolution change, but I didn't want to mess with actually changing technologies for this rev.

Here's what it looks like:
http://i.imgur.com/IA5el.png

Any number of resolution streams are supported. The 'res' parameter is arbitrary and doubles as the label. Could be '720p', '360p', and '240p' if you wanted. it displays in the order specified in the HTML markup or the params array.

I'd be happy to write tests if Zencoder can provide alternate bitrate sources of the 'ocean' video for use in the testing suite.

Here's the result of my testing:

Chrome (Mac & Win): pass
Safari (Mac): pass
Firefox (Mac & Win): pass
Android: pass
IE9: pass
IE8: fail (tried with Flash) however the zencoder repo without my edits didn't work for me on IE8 either

These commits only address the HTML5 side of things, not the Flash side.