JSFoo Pune 2019

Hotstar is a video streaming platform which has put India on the map of tech companies. We have a diverse user base which accesses our web app from a host of browser & device combination. When it came to building our HTML5 player we chose to use open-source technologies of videojs, hls.js, and dashjs to build a secure, robust and highly performant video player.

There are hundreds of thousands line of JS, that make use of Web API’s to facilitate playback in one single format. The JS code should create File Blobs, handle decryption of protected content, and ensure that the video playback occurs smoothly without interruption. Understanding the working and implementing it with the use of OSS is a learning experience like no other.

This talk will cover the unique set of problems and challenges Hotstar faces and how we leveraged open-source library for addressing those. Our talk will also cover the ways in which we also added performance tracking to our video player and improved it in stages by a cloose observation of the key performance metrics of playback.

Outline

Video playback Types(Live, VOD)
Video Streaming Basics
Web Streaming Technologies(HLS, DASH)
Unique use cases with video playback @ Hotstar
Available player options - Commercial and OSS
Reasons for selecting Open Source Software
The OSS tech stack
Content Protection for Video Streaming
Performance Measuring and Improvements
Baking in Robustness
Key Takeaways and Learnings

Requirements

None

Speaker bio

Mir is a developer who likes all things JS. He has worked with frameworks ranging from ExtJS, Angular, React, to even some little known frameworks as minified.js. Currently at Hotstar, he alongwith his colleagues has played a key role in developing and building the HTML5 player. He has also dabbled with Augmented Reality using JS, and has also presented talk during the Google Developer Fest of 2017.

Links

• https://www.youtube.com/watch?v=IcXMKQrkAfE
• https://blog.hotstar.com/brief-intro-to-a-cloud-based-workflow-for-video-streaming-3b2217e8a1e1

Slides

https://www.slideshare.net/MirMufaqamAli/web-player