Resolution switching between 'n' number of streams #232

wants to merge 32 commits into


None yet
1 participant

onyxrev commented Oct 18, 2012

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="" data-setup='{}'> <source src="" type='video/mp4' res="HD"> <source src="" type='video/mp4' res="SD" default="true"> <source src="" type='video/webm'> <source src="" 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: "", res: "HD" }, { type: "video/mp4", src: "", res: "SD", default: true }, { type: "video/webm", src: "" }, { type: "video/ogg", src: "" } ]);

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:

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.

onyxrev added some commits Oct 8, 2012

@onyxrev onyxrev nuke trailing white space b5f801a
@onyxrev onyxrev more white space nuking 5412140
@onyxrev onyxrev adding helpers for reduce, objKeys, and objValues to lib ad4ab52
@onyxrev onyxrev adding bucket method for techs so that we can easily group sa keyed b…
…y tech and then by resolution
@onyxrev onyxrev I think we probably want to keep the bucketized sources ordered so th…
…at people can choose their resolution preferences by order.
@onyxrev onyxrev selectSource now parses through an array of resolutions to find the b…
…est available resolution from those provided
@onyxrev onyxrev now pulling in the 'res' attribute from sources tags
Please enter the commit message for your changes. Lines starting
@onyxrev onyxrev adding cookie setter, getter, eraser 90ac46a
@onyxrev onyxrev can probably do without eraseCookie 284e195
@onyxrev onyxrev pulling preferred res from cookie 05d48d9
@onyxrev onyxrev whitespace nuke for tracks.js 572cbe8
@onyxrev onyxrev storing resolutions for use in switching after-the-fact 613f03f
@onyxrev onyxrev adding initial stab at a resolution changing button a6175a3
@onyxrev onyxrev whitespace controls.js e948348
@onyxrev onyxrev I think resolution button should live in controls.js, not tracks.js b1ffe5a
@onyxrev onyxrev adding resolutions.js module 80754c2
@onyxrev onyxrev adding resolutions.js to various require statements 57d5403
@onyxrev onyxrev resolutions button now rendering but sans resolutions 4c75bef
@onyxrev onyxrev resolutions now rendering in the new resolutions button 81cb5d4
@onyxrev onyxrev I don't think we really need this Resolutions class at all 641701c
@onyxrev onyxrev adding css rule for resolution button - just using the 'HD' glyph for…
… now
@onyxrev onyxrev changeResolution now supports kicking off a new stream and seeking to…
… the last playback position
@onyxrev onyxrev ignore my local test HTML file bfd3b51
@onyxrev onyxrev fire resolutionchange event on resolution change 53a7b42
@onyxrev onyxrev add support for 'default' attribute on sources with multiple resolutions 87d74a7
@onyxrev onyxrev resolution switcher now clears the menu item focus pseudoclass based …
…on whether the menu item's source is the current source
@onyxrev onyxrev switch the 'gear' icon because YouTube uses that for resolution changes 6806589
@onyxrev onyxrev I just noticed the localStorage support - so we don't need the cookie…
… code.
@onyxrev onyxrev using events to set default resolution menu item selection and rememb…
…ering new selections in localStorage
@onyxrev onyxrev forcing resolution index to be an integer e499649
@onyxrev onyxrev adding some more comments for new lib methods and resolution-related …
…player functionality
@onyxrev onyxrev resolution selector no longer displays if not more than one available…
… source

onyxrev closed this Oct 18, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment