This presentation provides a brief overview of how modern video players work, what broadcasters should look for depending on their technical and business goals, and different open-source tools that are available. It will discuss compatible formats, codecs and supported DRMs, user performance, the ability of each media engine to handle edge cases, and the performance of the ABR algorithms. At the end of the presentation, broadcasters will better understand what tools are right for their needs and be able to evaluate the pros and cons of each solution available.

1. 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

2. ● 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?

3. 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.
Infinite scale, limitless delivery.

4. Infinite scale, limitless delivery.
I. What’s inside an HTML5 player?

5. Infinite scale, limitless delivery.
I. What’s inside an HTML5 player?

6. Infinite scale, limitless delivery.
It’s like...
I. What’s inside an HTML5 player?

7. … your favorite burger.
Infinite scale, limitless delivery.
It’s like...
I. What’s inside an HTML5 player?

8. Infinite scale, limitless delivery.
Skin
Ads
Playlists
DRM
Manager
Decoder /
Renderer
Authentication
Content decryption
module
Media Engine(s)
UI
Media Engine(s)
Playback
& DRM
Social sharing
I. What’s inside an HTML5 player?

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

10. 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
User Interface

11. Infinite scale, limitless delivery.
3. Business logic
Authentication
Payment
Ads
*Configuration / device detection logic!
User Interface

12. Infinite scale, limitless delivery.
User Interface (cont’d)
Sample UI workflow with authentication, channels and pre-roll advertisement

13. 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, Haxe
User Interface (cont’d)

14. Infinite scale, limitless delivery.
Media Engine

15. Infinite scale, limitless delivery.
Media Engine

16. Infinite scale, limitless delivery.
Media Engine (cont’d)
Extremely important yet too often neglected.
Most often necessary to have several media engines to reach your audience.

17. Infinite scale, limitless delivery.
Decoder & DRM manager

18. 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
Infinite scale, limitless delivery.
II. What do I look for?

19. 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
Infinite scale, limitless delivery.
II. What do I look for?

20. Infinite scale, limitless delivery.
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.

21. Infinite scale, limitless delivery.
III. What’s out there?
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

22. Infinite scale, limitless delivery.
III. What’s out there?
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

23. Infinite scale, limitless delivery.
III. What’s out there?
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

24. Infinite scale, limitless delivery.
III. What’s out there?
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

25. But there are also a lot of off-the-shelf options.
Infinite scale, limitless delivery.
III. What’s out there?

26. 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.
Infinite scale, limitless delivery.
IV. But what am I getting myself into?

27. Questions?
Infinite scale, limitless delivery.

28. Nikolay Rodionov, Co-Founder and CPO, nikolay@streamroot.io
Erica Beavers, Head of Partnerships, erica@streamroot.io
Infinite scale, limitless delivery.
Contact Us!

29. 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!)
Infinite scale, limitless delivery.
Credits