Meet the Uberplayer.
Finally I can present you one of my newer interface experiments that has grown to something quite nice in the meantime. With the transition from small movieclips to longer and bigger full length flicks, sites like Youtube still don’t really get the idea that the movie player has to give the user space, feel a bit like a theater for a overall greater experience. What we still receive is a bloated page with thousands of comments below, tags and whatever – things the user really doesn’t need or want to see while watching. This is why I started a new experiment – building a movieplayer for the web that doesn’t suck.
Shows only what’s needed
The first idea of the interface was that everything that’s not required during movie playback will simply not be visible. This effectively means that if the video is playing, nothing else should be shown. Under that requirement, I thought it will also need at least movie information somewhere, and a search interface.
The Uberplayer has slide-in elements for controlling the video. Every function or visibility can be controlled through either the mouse or the keyboard. At initialization and pause, all controls are automatically shown, since you’re not focussing on the video. During video playback, move your mouse towards the bottom and the search slides in – move it to the top and you’ll see current video information and the search bar.
Coverflow
I can also proudly state that this is the first time I actually integrated my experimental Coverflow plugin into an actual application. After you entered a search term and pressed return, the bottom view slides in and presents the search result thumbnails in a really nice flowing coverflow like view if you are using a webkit enabled browser. If not, don’t worry – the fallback looks nice nontheless! Additionally, the click-through rate is minimized by switching coverflow states on mouse over – clicking opens the new movie.
Integration with Youtube
I choose to integrate with Youtube because it allows me to do searches to their API’s through their JSON API. What does that mean? It means that the Uberplayer is completely backendless, therefore doesn’t need any server software / logic. It’s all JavaScript, baby!
The second reason was that Youtube has a nice chromeless player, which worked really well for my kind of interface. The only drawback is that the chromless player doesn’t support HD playback at this point, but I hope they’ll give us that feature eventually.
Feature overview
To get an idea, here’s a quick walk through all features that are probably worth mentioning and explain how the player works.
- Full-screen playback at all times (toggle full screen mode on your browser for a better experience)
- Fluid slide-in interface (move your mouse towards the bottom or top to blend in controls)
- Click on the video to toggle pause state and blend in all controls
- Rich keyboard interaction
- ‘down‘ toggles the search results view
- ‘up‘ toggles movie information and search bar
- ‘space‘ toggles pause state
- ‘s‘ focusses search bar and let’s you type in a new search (‘escape’ cancels)
- ‘left‘,’right‘ let’s you navivate through search results when the search results view is active
- ‘return‘ opens a new movie when the search results view is active
- Automatically generates hash urls that you can bookmark or send to someone – they will not only open the movie, but also the attached search results
- Completely backendless through Youtube’s JSON API
What’s left to do
This is a very early preview release, so please be merciful. Some things I would like to do for the next version is a playlist manager (sliding in from the left), and if I only could get access to a chromeless Vimeo player, that would totally kick ass.
Anyway, check it out, and leave a comment!
33 Comments
Bohdan Ganicky on May 7th, 2009
Hi Paul,
I’m getting this error when I click on a video thumbnail:
fp.player.element is null
http://paulbakaus.com/lab/interface/uberplayer/js/player.js
Line 30
FF 3.0.10 – Linux
paul rostorp on May 7th, 2009
Great, well done!
Paul on May 7th, 2009
@Bohdan: that’s weird. It seems the youtube player cannot be properly initialized on Linux. I’ll look into it, thanks!
d3r1v3d on May 7th, 2009
Looks fantastic, Paul. Seems like you’ve put a lot of effort into making it slick and easy to use. I’m very impressed!
Cheers.
- Gavin
lrbabe on May 7th, 2009
This is great, and thank you for the links to the chromeless youtube and the json API as well!
vsync on May 7th, 2009
Psssh very nice 
jkarczm on May 7th, 2009
good job guys, i like it!
Ajax Girl » Blog Archive » Uberplayer shows us what JavaScript media players can look like on May 7th, 2009
[...] Media Players seem to be a hot topic right now. After the upgrades to Scott Schiller’s SoundManager, Paul Bakaus of the jQuery UI team now puts a firm stake into the ground with the uberplayer. [...]
jpjoyal on May 7th, 2009
Wow this is very nice, I bit choppy on the animation though (on FF3, when a thumbnails video is cliked, it goes at the top which is nice but the anim is choppy)
Also I think its missing some sort of spinner for when the video is really slow to load. Not sure it you can do something on your side though
Nikola on May 7th, 2009
Very nice indeed. Works on Kubuntu with FF3
manxomfoe on May 8th, 2009
Love the work and the design! One bit of feedback: if you are moving your mouse out of the window area by the top or bottom, you leave the screen dimmed. Maybe this is only on Chrome/Vista, but that’s what I’m seeing.
ziggy on May 8th, 2009
Does nothing for me. Image flies to the top but nothing plays. Tried ff3.5 and ie8.
墨尔本 on May 8th, 2009
This is so cool!!!
Thanks for sharing.
ziggy on May 8th, 2009
Hmm. I can’t get youtube at all right now for some reason, so it’s a connection issue, not your widget.
Uberplayer shows us what JavaScript media players can look like « Internet Turnkey Websites on May 8th, 2009
[...] Media Players seem to be a hot topic right now. After the upgrades to Scott Schiller’s SoundManager, Paul Bakaus of the jQuery UI team now puts a firm stake into the ground with the uberplayer. [...]
subin on May 8th, 2009
Excellent. For once I was pretty sure that all of it was a flash…. ;D
Nice Work
Paul on May 8th, 2009
thanks for all the great comments! some answers:
@jpjoyal: Wanted to implement that but forgot about it. Will definitely be added to the next revision (it’s possible, youtube gives you enough callbacks).
@manxomfoe: The dimming is supposed to be a feature, but it should only happen when a panel is shown. If it’s happening for you without any panel shown, then that’s a definite bug.
Paul on May 8th, 2009
Nice!
Can we use it for our own sites?
Also, needs a volume control
Uberplayer shows us what JavaScript media players can look like | Guilda Blog on May 8th, 2009
[...] Media Players seem to be a hot topic right now. After the upgrades to Scott Schiller’s SoundManager, Paul Bakaus of the jQuery UI team now puts a firm stake into the ground with the uberplayer. [...]
simonmcmanus on May 8th, 2009
Nice! Ive been working on something similar which also uses jQuery UI at goodtube.me.
Your code will come in handy in a number of places.
Thanks
BTW vimeo say they are working on the javascript api at the moment.
John Dowdell on May 10th, 2009
Hi, if you’re seeing differences among browsers (in letting JavaScript command Flash), then please let that browser vendor know you’d like more consistent abilities, thanks.
jd/adobe
The Ashes » Blog Archive » Uberplayer shows us what JavaScript media players can look like on May 10th, 2009
[...] Media Players seem to be a hot topic right now. After the upgrades to Scott Schiller’s SoundManager, Paul Bakaus of the jQuery UI team now puts a firm stake into the ground with the uberplayer. [...]
Mike on May 11th, 2009
This is great, but a tad overkill for a JavaScript implementation? I feel bad saying that because you did such an amazing job, and that should not be underestimated! But once you have a full window video going, the controls and thumbnail slider gets really clunky, and I’m using Chrome which has a pretty fast JS engine – I can only imagine how slow it would be in IE. For me, this sort of a thing is something better done in Flash. Yes you can do it in JS – you’ve obviously proven that much – but for a slick interface that has responsive controls, Flash (or Silverlight) would be a much better alternative.
jinjaDev » Blog Archive » js video player - Meet the Uberplayer on May 12th, 2009
[...] Written purely in javaScript. It’s a thing of beauty! – Paul Bakaus [...]
Paul on May 12th, 2009
@Mike: It’s largely not due to a performance reason within JavaScript, but somehow the video overlays are not handled very well by the browsers. However, things seem only behave slowly when the video is running – most often I click on the video, so the controls fade in, and then pick a new video. Then again, right now it’s more a experiment – I’ll try to optimize performance for an actual release!
links for 2009-05-12 « boblog on May 12th, 2009
[...] Meet the Uberplayer. With the transition from small movieclips to longer and bigger full length flicks, sites like Youtube still don’t really get the idea that the movie player has to give the user space, feel a bit like a theater for a overall greater experience. What we still receive is a bloated page with thousands of comments below, tags and whatever – things the user really doesn’t need or want to see while watching. This is why I started a new experiment – building a movieplayer for the web that doesn’t suck. (tags: youtube javascript webdesign) [...]
Uberplayer: A Media Player Made With JavaScript | Web Developer Blog - Downloadtube.com on May 19th, 2009
[...] to Paul Bakaus blog post about Uberplayer, “Every function or visibility can be controlled through either the mouse or the keyboard. At [...]
squarecat on June 2nd, 2009
Oh man, how can I take a look at your jQ UI slider (scrubber) events??
I’ve been working on a JW Player-based (AKA Longtail Video) media player for a couple weeks and, despite my rudimentary JS skills, I managed to pull it together using jQuery and interacting with the Longtail JS API.
One of my final issues is getting IE to recognize the actual scrub event that passes the jQ UI slider’s position to player. And my slider performs horribly in Opera, so I am obviously doing a poor job (though I am quite proud of the slider concept, yours is the only other implementation I’ve seen.)
Perhaps I was anxious to find out and overlooked it with Firebug, but it’s likely I wouldn’t recognize your method as I’m quite sure my have done it is quite laughable and convoluted.
zzzombie on July 15th, 2009
Just a short message to say that YouTube now allows to integrate HD videos with the chromeless player. All you have to do is adding the &hd=1 parameter when calling the chromeless player (not the movie you load in it) e.g. :
swfobject.embedSWF(‘http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=xxx&hd=1″, movieDOMid, width, height, “8″, null, vars, params, attributes);
Paul on July 20th, 2009
@zzzombie neat, I’m going to give it a try!
EM on October 5th, 2009
[...] to Paul Bakaus blog post about Uberplayer, “Every function or visibility can be controlled through either the mouse or the keyboard. At [...]
Twitted by danwellman on May 7th, 2009
[...] This post was Twitted by danwellman – Real-url.org [...]