2016 Streaming Media West: Choosing an HTML5 Player

Download 2016 Streaming Media West: Choosing an HTML5 Player

Post on 23-Jan-2018

341 views

Category:

Technology

0 download

TRANSCRIPT

  1. 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. 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. 3. I. Whats 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. Whats 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 well be talking about today. Infinite scale, limitless delivery.
  4. 4. Infinite scale, limitless delivery. I. Whats inside an HTML5 player?
  5. 5. Infinite scale, limitless delivery. I. Whats inside an HTML5 player?
  6. 6. Infinite scale, limitless delivery. Its like... I. Whats inside an HTML5 player?
  7. 7. your favorite burger. Infinite scale, limitless delivery. Its like... I. Whats inside an HTML5 player?
  8. 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. Whats inside an HTML5 player?
  9. 9. Infinite scale, limitless delivery. 1. Skin - the graphic design of your player User Interface
  10. 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. 11. Infinite scale, limitless delivery. 3. Business logic Authentication Payment Ads *Configuration / device detection logic! User Interface
  12. 12. Infinite scale, limitless delivery. User Interface (contd) Sample UI workflow with authentication, channels and pre-roll advertisement
  13. 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 (contd)
  14. 14. Infinite scale, limitless delivery. Media Engine
  15. 15. Infinite scale, limitless delivery. Media Engine
  16. 16. Infinite scale, limitless delivery. Media Engine (contd) Extremely important yet too often neglected. Most often necessary to have several media engines to reach your audience.
  17. 17. Infinite scale, limitless delivery. Decoder & DRM manager
  18. 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. 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. 20. 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.
  21. 21. Infinite scale, limitless delivery. III. Whats 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. 22. Infinite scale, limitless delivery. III. Whats 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. 23. Infinite scale, limitless delivery. III. Whats 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. 24. Infinite scale, limitless delivery. III. Whats 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. 25. But there are also a lot of off-the-shelf options. Infinite scale, limitless delivery. III. Whats out there?
  26. 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. 27. Questions? Infinite scale, limitless delivery.
  28. 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. 29. Wed 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