Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to be a Player (on the Internet) <ul><li>The Making of Yahoo! ’ s Universal JS Media Player </li></ul>JSConf US 2011 D...
What ’ s Y! Media Player? <ul><li>It ’ s a JS media player, so I ’ ll explain in JS: </li></ul><ul><li>(function add(one_s...
Demonstration http://www.reviler.org/2011/02/14/favorite-love-songs-four-takes/
DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS API / Customization
API / Customization <ul><li>API </li></ul><ul><ul><li>Many public methods on YAHOO.MediaPlayer </li></ul></ul><ul><ul><li>...
API / Customization <ul><li>// populate content </li></ul><ul><li>content.innerHTML = '<span class=&quot;item&quot;>' + </...
API / Customization <ul><li>Skinnable markup </li></ul><ul><ul><li>You only need to change 1 image </li></ul></ul><ul><ul>...
Our Goals
Our Goals <ul><li>Easy to install </li></ul><ul><li><script src=&quot; http://webplayer.yahoo.com/player.js &quot;></scrip...
Universalization <ul><li>We want our player to work anywhere </li></ul><ul><ul><li>Any page (even your cat's blog) </li></...
Universalization <ul><li>How would you go about playing any media type on any platform? </li></ul>Well, kinda... Sorry, @m...
Flexible Architecture
Adapter Pattern
Adapter Pattern BaseEngine VideoEngine YahooVideo YouTube QuickTime Flv Rhapsody Flash HTML <audio> HTML <video> AudioEngine
Graceful Fallback <ul><li>NOTE: Nimrod is another developer on the project </li></ul><ul><li>(and he ’ s really smart) </l...
Graceful Fallback <ul><li>MP3 link </li></ul><ul><ul><li>Headless Flash Engine w/JS API </li></ul></ul><ul><ul><li>Windows...
But enough about us - on to you! <ul><li>We co-exist with your page peacefully. ** </li></ul>** Unless your page is still ...
<ul><li>Namespacing </li></ul><ul><ul><li>Our own class namespace (currently .ymp-) </li></ul></ul><ul><ul><li>No #IDs (al...
Peaceful co-existence - JS <ul><li>Minimal included dependencies </li></ul><ul><li>Small loader with one URL that always g...
Performance
Less is more <ul><ul><li>CSS-in-JS (minified CSS is built into the JS) </li></ul></ul><ul><ul><ul><li>Combine/templatize a...
DOM caching / delegation <ul><li>We cache DOM queries </li></ul><ul><ul><li>As smartly as possible </li></ul></ul><ul><li>...
Async laziness (D ’ awwwwww!)
Async laziness <ul><li>Non-blocking (asynchronous append onload) </li></ul><ul><li>Lazy-loaded assets and media resolution...
SSJS via YQL
SSJS via YQL <ul><li>YQL server-side processing with SSJS in an <execute> </li></ul><ul><ul><li>Cached with YQL ’ s cachin...
To the Future!!!
New UI <ul><li>Sexier, Faster, Modernizd </li></ul>
More engines/media/devices <ul><li>HTML5 <audio>/<video> (srsly, this is a big deal) </li></ul><ul><li>Additional codecs a...
Thanks for listening <ul><li>If you have any questions or comments, let us know! </li></ul><ul><li>Dan Beam </li></ul><ul>...
Credits <ul><li>Images courtesy of: </li></ul><ul><ul><li>http://flickr.com/28268402@N03 </li></ul></ul><ul><ul><li>http:/...
Upcoming SlideShare
Loading in …5
×

Jsconf 2011-us

3,800 views

Published on

The making of Yahoo!'s universal JavaScript player, by Dan Beam.

Published in: Technology

Jsconf 2011-us

  1. How to be a Player (on the Internet) <ul><li>The Making of Yahoo! ’ s Universal JS Media Player </li></ul>JSConf US 2011 Dan Beam [email_address]
  2. What ’ s Y! Media Player? <ul><li>It ’ s a JS media player, so I ’ ll explain in JS: </li></ul><ul><li>(function add(one_script, your_page){ </li></ul><ul><li>(jQuery || Y.one)('body') </li></ul><ul><li>.append('<script src=&quot;' + one_script + '&quot;/>'); </li></ul><ul><li>your_page = 'AWESOME!!!'; </li></ul><ul><li>})(' http://webplayer.yahooapis.com/player.js' , 'cool'); </li></ul>
  3. Demonstration http://www.reviler.org/2011/02/14/favorite-love-songs-four-takes/
  4. DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS API / Customization
  5. API / Customization <ul><li>API </li></ul><ul><ul><li>Many public methods on YAHOO.MediaPlayer </li></ul></ul><ul><ul><li>Env vars: YMPParams = { ' autoplay ' : true}; </li></ul></ul><ul><ul><li>Allows you to create custom experiences </li></ul></ul><ul><ul><li>API demo - http://danbeam.org/ymp_api.html </li></ul></ul>
  6. API / Customization <ul><li>// populate content </li></ul><ul><li>content.innerHTML = '<span class=&quot;item&quot;>' + </li></ul><ul><li>spans.join('</span><span class=&quot;item&quot;>') + '</span>'; </li></ul><ul><li>YAHOO.MediaPlayer.addTracks(content, null, true); </li></ul><ul><li>YAHOO.MediaPlayer.play(); // play first item </li></ul><ul><li>setInterval(function(){ // start cycle </li></ul><ul><li>YAHOO.MediaPlayer.next(); </li></ul><ul><li>}, nextDelay); </li></ul>
  7. API / Customization <ul><li>Skinnable markup </li></ul><ul><ul><li>You only need to change 1 image </li></ul></ul><ul><ul><li>All the rest easily styled with CSS </li></ul></ul><ul><ul><li>More preset themes in the future </li></ul></ul>Yahoo! Search skin
  8. Our Goals
  9. Our Goals <ul><li>Easy to install </li></ul><ul><li><script src=&quot; http://webplayer.yahoo.com/player.js &quot;></script> </li></ul><ul><li>From page to playlist </li></ul><ul><ul><li>Mixing audio and video in the same page is sweet </li></ul></ul><ul><ul><li>Richer experience (adds to page, isn't annoying) </li></ul></ul>
  10. Universalization <ul><li>We want our player to work anywhere </li></ul><ul><ul><li>Any page (even your cat's blog) </li></ul></ul><ul><ul><li>Any browser/device (desktop, tablet, mobile) </li></ul></ul><ul><ul><li>Any media/service (we ’ re adding more playback mechanisms / providers) </li></ul></ul>
  11. Universalization <ul><li>How would you go about playing any media type on any platform? </li></ul>Well, kinda... Sorry, @miketaylr, :(
  12. Flexible Architecture
  13. Adapter Pattern
  14. Adapter Pattern BaseEngine VideoEngine YahooVideo YouTube QuickTime Flv Rhapsody Flash HTML <audio> HTML <video> AudioEngine
  15. Graceful Fallback <ul><li>NOTE: Nimrod is another developer on the project </li></ul><ul><li>(and he ’ s really smart) </li></ul>
  16. Graceful Fallback <ul><li>MP3 link </li></ul><ul><ul><li>Headless Flash Engine w/JS API </li></ul></ul><ul><ul><li>Windows -> WMP -> QuickTime </li></ul></ul><ul><ul><li>OS X -> QuickTime </li></ul></ul><ul><li>Yahoo! Movie link ( http://movies.yahoo.com/movie/1810099246/info ) </li></ul><ul><ul><li>Yahoo! Movies API (via YQL) </li></ul></ul><ul><ul><li>YouTube (gdata) </li></ul></ul>
  17. But enough about us - on to you! <ul><li>We co-exist with your page peacefully. ** </li></ul>** Unless your page is still on gopher
  18. <ul><li>Namespacing </li></ul><ul><ul><li>Our own class namespace (currently .ymp-) </li></ul></ul><ul><ul><li>No #IDs (always global, too risky) </li></ul></ul><ul><ul><li>Ant <filterchain> on YUI3's widget CSS at build </li></ul></ul><ul><ul><ul><li>from .yui3-slider-widget { } to .ymp-slider-widget { } </li></ul></ul></ul><ul><li>Contextual CSS reset (protect our player ’ s style) </li></ul><ul><ul><li>from html, body , div, ... to .ymp-reset div, ... </li></ul></ul><ul><ul><li>protects against a { cursor: crosshair; } </li></ul></ul>Peaceful co-existence - CSS
  19. Peaceful co-existence - JS <ul><li>Minimal included dependencies </li></ul><ul><li>Small loader with one URL that always gets the latest version for you </li></ul><ul><ul><li>Full player cached forever (including on other sites) </li></ul></ul><ul><li>We don ’ t touch natives (Array, Object) (*cough* Prototype, Mootools *cough*) </li></ul><ul><li>We don ’ t conflict with any other libraries (including YUI) </li></ul><ul><li>We only introduce 1 global - YAHOO.MediaPlayer </li></ul>
  20. Performance
  21. Less is more <ul><ul><li>CSS-in-JS (minified CSS is built into the JS) </li></ul></ul><ul><ul><ul><li>Combine/templatize at build time with Ant </li></ul></ul></ul><ul><ul><li>CSS sprites </li></ul></ul><ul><ul><li>Investigating inlining data URIs for assets </li></ul></ul>(When it comes to HTTP requests)
  22. DOM caching / delegation <ul><li>We cache DOM queries </li></ul><ul><ul><li>As smartly as possible </li></ul></ul><ul><li>Event delegation (kind of a must these days) </li></ul><ul><ul><li>Less memory spent on event handlers </li></ul></ul><ul><ul><li>Catches extraneous events (if we want to) </li></ul></ul>
  23. Async laziness (D ’ awwwwww!)
  24. Async laziness <ul><li>Non-blocking (asynchronous append onload) </li></ul><ul><li>Lazy-loaded assets and media resolution </li></ul><ul><ul><li>Media item resolution (we don't get metadata ‘ til you play something) </li></ul></ul><ul><ul><li>Yahoo! Video Player </li></ul></ul><ul><ul><li>Yahoo! Movies metadata through YQL </li></ul></ul><ul><ul><li>YouTube Player </li></ul></ul>
  25. SSJS via YQL
  26. SSJS via YQL <ul><li>YQL server-side processing with SSJS in an <execute> </li></ul><ul><ul><li>Cached with YQL ’ s caching and our own </li></ul></ul><ul><ul><li>Only transmits what we need </li></ul></ul><ul><ul><li>Adds some information hiding / security </li></ul></ul><ul><ul><ul><li>Access control per operation (r, w, x) </li></ul></ul></ul>
  27. To the Future!!!
  28. New UI <ul><li>Sexier, Faster, Modernizd </li></ul>
  29. More engines/media/devices <ul><li>HTML5 <audio>/<video> (srsly, this is a big deal) </li></ul><ul><li>Additional codecs and services </li></ul><ul><li>Mobile / Tablet </li></ul><ul><ul><li>Smaller version for all mobile devices / tablets </li></ul></ul><ul><ul><li>iPad / iPhone / iTouch support </li></ul></ul><ul><li>Support additional video and audio publishers </li></ul><ul><li>Add Social (Twitter, Facebook, IntoNow) </li></ul><ul><li>... and much much more! </li></ul>
  30. Thanks for listening <ul><li>If you have any questions or comments, let us know! </li></ul><ul><li>Dan Beam </li></ul><ul><ul><ul><li>email: dbeam@yahoo-inc.com </li></ul></ul></ul><ul><ul><ul><li>twitter: @danbeam </li></ul></ul></ul><ul><ul><ul><li>site: http://mediaplayer.yahoo.com </li></ul></ul></ul>
  31. Credits <ul><li>Images courtesy of: </li></ul><ul><ul><li>http://flickr.com/28268402@N03 </li></ul></ul><ul><ul><li>http://flickr.com/dancoulter </li></ul></ul><ul><ul><li>http://flickr.com/nimrodbar </li></ul></ul><ul><ul><li>http://flickr.com/e2 </li></ul></ul><ul><ul><li>http://flickr.com/emilymills </li></ul></ul><ul><ul><li>http://flickr.com/hoanghaithinh </li></ul></ul><ul><ul><li>http://flickr.com/rongorongo </li></ul></ul><ul><ul><li>http://flickr.com/programmerman </li></ul></ul><ul><li>(Did I mention Flickr rocks?) </li></ul>

×