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 playe

1. Building a Robust Video Player
With Open Source Tech @ Hotstar

2. Basics First
● Media Container Formats
● Encoding Formats
● Some common Terms ---
○ Video Resolution
○ Aspect Ratio
○ Frame Rate
○ Bitrate

3. Bit more on Bitrate
● The data rate for a video file is the bitrate.
● So a data rate specification for video content that runs at 1 megabyte per
second would be given as a bitrate of 8 megabits per second (8 mbps).
● Internet videos, phone videos, and HD blu-ray videos for tV all vary in bitrate.

4. Why You told me Basics
● 360x240 resolution =====> 86400 pixels per frame.
● The frame rate is 30 Hz =====> 86400 × 30 = 2592000 pixels per second.
So let's say 1 pixel is 3 Bytes (24 Bits) of data: we have 2592000 × 24 bits per second
video (62208000 Bits), that is 62208 kBits (This is a rough estimate, and there is
something more).

5. Same same resolution different different
Bitrate
● Video quality has a lot to do with how the video was compressed.
● The more you compress it, the less bits it takes per frame.
● More you compress, the worse the quality is.
● Now, some videos are much easier to compress than others
● Spatial Redundancy and Temporal Redundancy

6. Adaptive Bitrate Streaming(a.k.a Auto Mode)
Aim: Optimize the streaming experience under a diverse set of network conditions
and across various devices
Approach:
● Produce multiple files from the same source file
● The file is consumed/delivered adaptively
● This occurs transparently to the user, so that the viewer clicks one button.

7. ABR Technologies
Relevant to us for now: HLS, DASH
HLS --- HTTP Live Streaming (HLS)
DASH --- Dynamic Adaptive Streaming over HTTP

8. HLS(HTTP Live Streaming)

9. DASH(Dynamic Adaptive Streaming For HTTP)

10. HLS vs DASH
● Proprietary
● Codec Agnostic
● No DRM method specified
● HEVC

11. Content Protection- Digital Rights
Management
DRM technologies use encryption to protect the content prior to or during streaming,
downloading or other transfer.

12. DRM encoding at source

13. DRM decryption at Player

14. Basic Player Architecture

15. Hls.js architecture
● Main functionalities are split into several subsystems
● All subsystems are instantiated by the Hls instance.
● Each subsystem heavily relies on events for internal/external communications.
● Events are handled using EventEmitter

16. DASH.js Architecture

17. Performance Measuring
● Key Metrics @ Hotstar to track Playback Performance
● Analytics Measurement Platform
● Analysing the weekly and monthly reports
● Identifying the key areas of improvements

18. Performance Improvements
Will list these during the talk

19. Ensuring Player Robustness
● Using fallback streams during live playback
● Handling tsunami wave of customers with a panic scenario
● Identify and build around some minor bugs in the OSS libraries

20. Key Takeaways and Learnings
● Video Streaming formats and technologies
● There are hundreds of thousands line of JS, that make use of Web API's to facilitate playback in
one single format
● But one does not have to reinvent the wheel. Hail OSS
● Customise the library to suit one's needs. You will be surprised of how much you can learn by
looking at the code
● Building for performance and robustness requires an approach of measuring and tuning the player