Unifying the Flash and HTML5 Video Experience

Twitter hashtag: #Kaltura

Kaltura Inspire Webinar November 29, 2011

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

Michael Dale Lead Front End Architect

Devon Copley Managing Director, Media & Entertainment

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

This mobile audience is especially valuable

But you can’t reach them with Flash

7% of total Internet traffic

46% > $100k HHI, 30% 25-34

>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

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

Player Studio GUI

Associate CSS Associate SWF

UiConf XML HTML5 and Flash Player

Manual control via API if needed

Be in control of HTML5 trade offs: ( w/ Kaltura HTML5 embed player rules plugin )

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?

V.S

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

Ad integrations:

Kaltura native analytics + Kaltura HTML5 / Flash supports:

Analytics and Ads for both HTML5 and Flash with unified configuration

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/