Download - 2016 Streaming Media West: Choosing an HTML5 Player

Choosing an HTML5 player An overview of how media engines work & benchmark

of open-source frameworks

Streaming Media West – Track D

Wednesday, November 2, 2016

1:45 to 2:30 pm

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

traffic

● Experts in HTML5 video through integrations into open-source & proprietary

players

● Consultants in the transition from Flash to HTML5

Infinite scale, limitless delivery.

Streamroot: Who are we?

I. What’s inside an HTML5 player? Main layers, how they work and how they interact.1. UI / business logic

2. Media engine

3. Decoder & DRM manager

II. What am I looking for? Choosing according to your business and tech goals.Robustness and performance, modularity, features, ABR

III. What’s out there? Benchmark of open-source solutions.Dash.js, shaka player, hls.js, and a few other others

IV. Going further: what am I getting myself into?

What we’ll be talking about today.



I. What’s inside an HTML5 player?


It’s like...


… your favorite burger.


It’s like...



Skin

Ads

Playlists

DRM

Manager

Decoder /

Renderer

Authentication

Content decryption

module

Media Engine(s)

UI

Media Engine(s)

Playback

& DRM

Social sharing



1. Skin - the graphic design

of your player

User Interface


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

User Interface

https://github.com/videojs/video.js/wiki/Plugins#community-plugins


3. Business logic

Authentication

Payment

Ads

*Configuration / device detection logic!

User Interface


User Interface (cont’d)

Sample UI workflow with authentication, channels and pre-roll advertisement


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, Haxe

User Interface (cont’d)


Media Engine


Media Engine (cont’d)

Extremely important yet too often neglected.

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


Decoder & DRM manager

1. General criteria - device, format and codec dependencies

2. Custom features- DRMs

- DVR subtitles

- QoS, etc.

3. Perfs & Quality - startup time

- ABR

- error strategies

4. Street cred, robustness, ease of use


II. What do I look for?

Light-touch dev:

- Simplicity and stability of the media engine

- Assess extensibility & ease of incorporating special features

- Media engine customization

- Events exposed

- Debugging

Digging deeper:

- Robust yet flexible core design

- Tests and testing coverage

- community & support


II. What do I look for?


III. What’s out there?

Disclaimer!

- What follows are all GOOD options - probably the best out there.

- We’ve tried to be solely objective based on our research and experience.

- Features, support and upkeep are always changing.



PROs

Supported by DASH-IF

Pushed & maintained by Akamai + tier-1s (BBC)

Highest visibility, big community

Lots of features and use-cases handled

Widely used in production

Huge test suite + online test page

CONs

A little bit of technical debt and complexity

Non-trivial API and customization config

H264/AAC support only

http://dashif.org/reference/players/javascript/index.html



PROs

Built by an entire at Google: solid & smart

Performances and robustness, quick to improve

Simple to get started, good tutorials

Only one supporting WebM, VP8, VP9, open audio codecs

Good support on github and Google groups

CONs

Google-centric

Today lacks some features for large broadcasters

Stricter PR & features policy

No ES6 support

Fewer OVP and open-source all-in-one integrations



PROs

Lead by Dailymotion, built from scratch by author of Flashls

Enormous traction and visibility

Clear architecture design, easily extendable

Good robustness and debug demo, responsive support

Widely used in prod by all-in-one players + tier-1s

CONs

Not all HLS features supported yet

Some restrictions from the transmuxing & HLS: no DRMs today,

only AES128

http://dailymotion.github.io/hls.js/demo/



PROs

Seamless Flash fallback with a MediaSource polyfill

De facto solution for HLS with VideoJS

Large community of users (Brightcove + Videojs)

In production with Brightcove with a wide range of customers

CONs

Videojs plugin: not usable without videojs

Lack of public debug tools or pages

Learning curve on providers & tech behind it

But there are also a lot of off-the-shelf options.



The build vs. buy tradeoff.

- Do I have the internal resources to develop,

integrate, customize and maintain?

- Are the features I need already available in off-

the-shelf and/or open-source solutions?

Consider time to market.


IV. But what am I getting myself into?

Questions?


Nikolay Rodionov, Co-Founder and CPO, [email protected]

Erica Beavers, Head of Partnerships, [email protected]


Contact Us!

mailto:[email protected]

mailto:[email protected]

We’d like to send out a huge thanks to Ludovic Bostral and Benjamin Pott from

Afrostream for letting us borrow their burger analogy. Without them this talk would not

have been half as juicy.

(Also their platform rocks!)


Credits

Download - 2016 Streaming Media West: Choosing an HTML5 Player

Top Related