2016 Streaming Media West: Transitioning from Flash to HTML5

Embed Size (px)

Text of 2016 Streaming Media West: Transitioning from Flash to HTML5

PowerPoint Presentation

Choosing an HTML5 player An overview of how media engines work & benchmark of open-source frameworksStreaming Media West Track DTuesday, May 10, 2016 1:45 to 2:30 pm

Pioneers in hybrid video delivery systems to accompany exponential growth in OTT traffic

Experts in HTML5 and consultants in the transition from Flash

Infinite scale, limitless delivery.

Streamroot: Who are we?

And who are you?Infinite scale, limitless delivery.

HTML5 basicsA. Why make the transitionB. Formats, APIs, standardization

Delving in to the migrationA. Formats & EncodingB. PlayersC. DRMs, ads and business featuresD. HTTPs

Choosing a playerA. Modern player architectureB. Considerations & what to look forC. Benchmark of open-source and proprietary options What well be talking about today.

Infinite scale, limitless delivery.

Examples: hls.js & dash.jsDebugging, subtitles, encryption, ads, analytics, Streamroot, ABR

Going from POC to productionA. What could go wrongB. What happens after I do a POC? Workflow, fallbacks, etc.C. Smoothly transitioning into production: QoS metrics, AB testingD. Useful tools & links

What well be talking about today.

Infinite scale, limitless delivery.

Infinite scale, limitless delivery.I. Its time to switch to HTML5.

Infinite scale, limitless delivery.I. HTML5 BasicsAPIsMedia Source Extensions

Makes HTTP adaptive streaming possible in HMTL5

Use JavaScript to build streams and inject data into the video tags buffer

Source: W3C specs

Infinite scale, limitless delivery.I. HTML5 BasicsAPIsEncrypted Media Extensions

Allows for DRMs in HMTL5

Provides a way to interact with content protection systems

Plugin-free

Common Encryption (CENC): standardized key and encryption methods - multiple DRMs for same file

Source: W3C specs

Infinite scale, limitless delivery.

I. HTML5 BasicsAPIsSource: Bitmovin

Infinite scale, limitless delivery.I. HTML5 BasicsFormats available

HDS

Infinite scale, limitless delivery.I. HTML5 BasicsFormats available

Source: Encoding.com

Infinite scale, limitless delivery.I. HTML5 BasicsStandardization

CMAF!

Infinite scale, limitless delivery.II. Delving into the migration What are you using today?

Infinite scale, limitless delivery.II. Delving into the migrationFormats & EncodingSignificant changes to the encoding side that can take some time

Encode to MP4 and then repackage as necessary for target platforms

Lots of packaging solutions out there: Wowza, Unified Streaming Platform, etc.

Infinite scale, limitless delivery.II. Delving into the migrationPlayersMore flexible architecture, with separation between UX and media engine logic

When choosing: look at use case and feature requirements

Section III.

Infinite scale, limitless delivery.II. Delving into the migrationBusiness featuresDRMs: switch from token authorization to HMTL5 DRM

Ads: rewrite the ad logic in HTML5

Business logic: make sure 3rd party plugins are also compatible with HTML5

Infinite scale, limitless delivery.II. Delving into the migrationHTTPSBeware!

Playing HTTP streams even in an HTTPS environment is not an option in HTML5.

Changing to HTTPs can be expensive and long, depending on your CDN.

Infinite scale, limitless delivery.Its like...III. Player architectureModern player architecture

your favorite burger.

Infinite scale, limitless delivery.

Its like...III. Player architectureModern player architecture

Infinite scale, limitless delivery.UIIII. Player architecture

Infinite scale, limitless delivery.

SkinUIIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsAuthenticationUIIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsPlaylistsAuthenticationUISocial sharingIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsPlaylistsAuthenticationUIMedia Engine(s)Social sharingIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsPlaylistsAuthenticationMedia Engine(s)UIMedia Engine(s)Social sharingIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsPlaylistsAuthenticationSocial sharingMedia Engine(s)UIMedia Engine(s)Playback& DRMIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsPlaylistsAuthenticationContent decryptionmoduleMedia Engine(s)

DRM ManagerUIMedia Engine(s)Playback& DRMSocial sharingIII. Player architecture

Infinite scale, limitless delivery.

SkinAdsPlaylistsDRM ManagerDecoder / RendererAuthenticationContent decryptionmoduleMedia Engine(s)UIMedia Engine(s)Playback& DRMSocial sharingIII. Player architecture

Infinite scale, limitless delivery.1. Skin - the graphic design of your player

III. Player architectureUser Interface

@charlo - Eurosport video player example that we used in blog

Infinite scale, limitless delivery.1. Skin - the graphic design of your player

2. UI logic - features defining all interaction with the user on top of video playback

Lots of plugins available, video.js for example

III. Player architectureUser Interface

@charlo - Eurosport video player example that we used in blog

Infinite scale, limitless delivery.3. Business logicAuthenticationPaymentAds

*Configuration / device detection logic!III. Player architectureUser Interface

@charlo - Eurosport video player example that we used in blog

Infinite scale, limitless delivery.

Sample UI workflow with authentication, channels and pre-roll advertisementIII. Player architectureUser Interface

Authentication

Payment

Channels / Playlists

Configuration logic / device detection

A/B testing logic

Ads

Infinite scale, limitless delivery.Easily customizable, with many plugins available for use or inspiration.

Add features as plugins/modules to the core UI base.

Create a unified user experience across browsers, even if the media engine behind it may vary from device to device.Check out tools such as React native, HaxeIII. Player architectureUser Interface

Infinite scale, limitless delivery.III. Player architectureMedia Engine

Manifest parser & interpreter

Downloader

Streaming engine

Quality metrics estimators

ABR controller

DRM manager (optional)

Transmuxer (optional)

Infinite scale, limitless delivery.III. Player architectureMedia Engine

Manifest parser & interpreter

Downloader

Streaming engine

Quality metrics estimators

ABR controller

DRM manager (optional)

Transmuxer (optional)

Infinite scale, limitless delivery.III. Player architectureMedia Engine

Manifest parser & interpreter

Downloader

Streaming engine

Quality metrics estimators

ABR controller

DRM manager (optional)

Transmuxer (optional)

Infinite scale, limitless delivery.III. Player architectureMedia Engine

Manifest parser & interpreter

Downloader

Streaming engine

Quality metrics estimators

ABR controller

DRM manager (optional)

Transmuxer (optional)

Infinite scale, limitless delivery.III. Player architectureMedia Engine

Manifest parser & interpreter

Downloader

Streaming engine

Quality metrics estimators

ABR controller

DRM manager (optional)

Transmuxer (optional)

Infinite scale, limitless delivery.III. Player architectureMedia Engine

Manifest parser & interpreter

Downloader

Streaming engine

Quality metrics estimators

ABR controller

DRM manager (optional)

Transmuxer (optional)

Infinite scale, limitless delivery.Extremely important yet too often neglected.

Most often necessary to have several media engines to reach your audience.

III. Player architectureMedia Engine

@charlo shma. (ill have to find it)

Infinite scale, limitless delivery.

III. Player architectureDecoder & DRM manager

Buffer ratio1. General criteria device, format and codec dependencies

Infinite scale, limitless delivery.III. What to look for

2. Custom featuresDRMs DVR subtitlesQoS, etc.

3. Perfs & Quality startup time ABRerror strategies4. Street cred, robustness, ease of use

Light-touch dev: Simplicity and stablity of the media engineAssess extensibility & ease of incorporating special featuresMedia engine customizationEvents exposedDebugging

Infinite scale, limitless delivery.

Digging deeper: Robust yet flexible core designTests and testing coveragecommunity & supportIII. What to look for

Buffer ratio

Infinite scale, limitless delivery.III. Whats out there?

Disclaimer!

What follows are all GOOD options - probably the best out there. Weve tried to be solely objective based on our research and experience.Features, support and upkeep are always changing.

Buffer ratio

Infinite scale, limitless delivery.PROs

Supported by DASH-IFPushed & maintained by Akamai + tier-1s (BBC)Highest visibility, big communityLots of features and use-cases handledWidely used in production Huge test suite + online test page

CONs

A little bit of technical debt and complexityNon-trivial API and customization configH264/AAC s