2016 Streaming Media West: Choosing an HTML5 Player
-
Upload
erica-beavers -
Category
Technology
-
view
349 -
download
0
Transcript of 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.
Infinite scale, limitless delivery.
… your favorite burger.
Infinite scale, limitless delivery.
It’s like...
I. What’s inside an HTML5 player?
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?
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
Infinite scale, limitless delivery.
3. Business logic
Authentication
Payment
Ads
*Configuration / device detection logic!
User Interface
Infinite scale, limitless delivery.
User Interface (cont’d)
Sample UI workflow with authentication, channels and pre-roll advertisement
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)
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.
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?
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?
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.
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
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
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
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
But there are also a lot of off-the-shelf options.
Infinite scale, limitless delivery.
III. What’s out there?
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?
Nikolay Rodionov, Co-Founder and CPO, [email protected]
Erica Beavers, Head of Partnerships, [email protected]
Infinite scale, limitless delivery.
Contact Us!