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

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

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 Manual control via API if needed Associate SWF

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 Note: IE and any browser with flash is supported * Old Firefox / Chrome via the flash, this chart is only for HTML5 and other * Opera, other browsers 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

Join our Facebook Group: http://www.facebook.com/groups/kaltura/