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

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

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

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, nikolay@streamroot.io
Erica Beavers, Head of Partnerships, erica@streamroot.io
Contact Us!

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

2016 Streaming Media West: Choosing an HTML5 Player

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to 2016 Streaming Media West: Choosing an HTML5 Player (20)

Recently uploaded (20)

2016 Streaming Media West: Choosing an HTML5 Player

Editor's Notes