Unifying the Flash and HTML5 Video Experience Kaltura Inspire Webinar November 29, 2011 Twitter hashtag: #Kaltura
Who uses Kaltura? Over 150,000 websites; over 20,000 community members Market leadership in Media, Education and Enterprise
Pioneers in the HTML5 Video Community
Presenters Devon Copley Managing Director, Media & Entertainment Michael Dale Lead Front End Architect Dr. Michal Tsur President & CMO
The New Breed of Online Video Consumers
The New Breed of Online Video Consumers = Tablets, Smartphones and OTT WW tablet sales WW Smartphone sales Strategy Analytics
The New Breed of Online Video Consumers = a different audience
The New Breed of Online Video Consumers = a different experience Lean-back experience Higher-quality, larger frame size Much longer average time watched More likely to consume long-form content
Q: Mobile Apps or Mobile Web? A: BOTH
The New Breed of Online Video Consumers = different technology Mobile apps are great, but are not cross-platform and limit reach You cannot successfully address video to this new audience without HTML5 Adobe Flash on mobile is officially deprecated Over 90% of smartphones & tablets are HTML5 enabled Almost 75% is HTML5 video only (no Flash) Even within apps, many are HTML5-based
Near 60% of users have HTML5 video browsers with a significant growth trend <Video> Not supported Source - http://gs.statcounter.com
Some of your best audience is HTML5-only Tablets and smartphones now comprise 7% of total Internet traffic This mobile audience is especially valuable 46% > $100k HHI, 30% 25-34 But you can t reach them with Flash >75% HTML5 video only Comscore, October 2011
The time for HTML5 video is now HTML5 support is rapidly growing Many of your most valuable users are HTML5 only Early HTML5 video challenges largely solved Differing platform capabilities The codec wars Unified UI across Flash/HTML5 Unified integration strategies
Look and Feel: Parity Unified UI language enables flash-like controls All typical features: seek, volume, overlays, sophisticated ad support, closed captions Exceptions: true full-screen (coming in current nightlies of Webkit & Firefox) & DRM
SEO go HTML5 first <VIDEO> tag easily parsed (by search engines, Facebook, etc.) POSTER and TITLE attributes allow to better define how the content is referenced This may mean in the future no special need for Video specific site maps
Content Protection the Caveat Strong DRM on HTML5 still far off Alternative - Scrambling: Token auth, geoblocking, Chunking - may be sufficient for most cases Native applications can provide customized DRM alternative in mobile. Flash/Silverlight for desktop
HTML5 Technical Overview
Challenges for Scalable HTML5 Delivery Making Players 'look the same' in HTML5 and Flash Controlling player trade offs of HTML5 vs Flash Quality playback on devices: managing flavor selection and adaptive streaming Managing per device profiles and feature sets Common configuration language for Flash and HTML5 Parallel feature set for analytics and ad providers On page player performance and compatibility
Challenges for Scalable HTML5 Delivery Android Fragmentation
Overcoming Challenges: Theming Player Studio GUI UiConf XML HTML5 and Flash Player Associate CSS Associate SWF Manual control via API if needed Features are described in XML ( GUI editor ) Fine grain control over layout with css ( in HTML5 ) and swf files (for flash) Enables robust theme control and makes it easy to add player features
Be in control of HTML5 trade offs: ( w/ Kaltura HTML5 embed player rules plugin ) V.S Native vs HTML controls on ipad? Branded player, no ad skip, no UI for volume control Or native controls, improved full screen experience Lead with Flash or HTML5 on Android? Flash ( and html5 ) on different versions of android Leading with HTML5 on grade A desktop browsers? HTML5 when flash is not installed on desktop?
Adaptive Streaming for ios and beyond Full Apple Adaptive HLS for ios (and some Android) What about desktop HTML5? Progressive download with youtube like quality switcher All transcoding managed via the OVP (of course) Future work on full adaptive solution for desktop HTML5 Sample Firefox Source Switch
Manage HTML5 features across a fragmented platform Grade A Full Functionality * Safari ios on ipad ios 3.2 + * IE9 * Latest Chrome release (currently 15) * Latest Firefox release (currently 8) * OSX Safari 5.1 Grade B Reduced Functionality * Android 2.x and above * Safari ios on iphone ios 3.2 + Grade C Minimal functionality * Blackberries * IE8-6 * Old Firefox / Chrome * Opera, other browsers Note: IE and any browser with flash is supported via the flash, this chart is only for HTML5 and other fallbacks
One XML language to rule them all Like themes, a single uiconf xml file controls features UiConf language enables complex feature rules based on custom entry medata across both html5 and flash For example a rule to disable long form content with a given player Or passing structured stream data to analytics or ad providers
Write on page integrations once for both HTML5 and Flash Growing HTML5-only segment makes Flash-only interactivity costly Need a unified event API in Javascript to enable a single point of integration and page interaction
Analytics and Ads for both HTML5 and Flash with unified configuration Ad integrations: Kaltura native analytics + Kaltura HTML5 / Flash supports:
Kaltura HTML5 Player Kaltura HTML5 player based on jquery and mediawiki resource loader Sandboxed inside an iframe for easy integration into many site contexts Player API bridges player and on page javascript interactions Kaltura HTML5 include resource delivery system to dynamically minify and group javascript and css resource requests
Kaltura HTML5Video.org - Learn more Many more technical details at html5video.org Active community answers many forum requests Player comparison gives helpful overview for stand alone HTML5 player integration options
HTML5 Video Community & Html5video.Org
HTML5Video.org The HTML Video Community Large HTML-Video Knowledge Base Best Practices Players Comparison HTML Video Demos Aggregated Industry News about HTML Video & Blog Forums and discussions about HTML Video and best practices The New York HTML & JavaScript Monthly Hackfest http://www.meetup.com/how-to-javascript/ Next Meetup planned for Dec 14. Contribution management for Kaltura s HTML5 Video Library
HTML5Video.org Kaltura's HTML5 Video Library Free and Open Source Widely adopted and collaboratively developed: - Wikipedia, Adobe, Disney, Internet Archive, Best Buy Cross platform, seamless fallback mechanism Unified UI framework Single cross platform Javascript interface Unified cross-flash-html5 Javascript plugins Many existing integrations (DoubleClick, Nielsen, Comscore, cent2cent, plymedia and 20 more) Powerful free & open source media management and access control in the backend through Kaltura
Get Involved Attend the next NYC HTML5 Meetup: http://www.meetup.com/how-to-javascript/ Join the Kaltura Community www.kaltura.org Visit html5video.org www.html5video.org Follow us on twitter @kaltura Join our Facebook Group: http://www.facebook.com/groups/kaltura/