Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web player

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

  • Be the first to comment

  • Be the first to like this

Web player

  1. 1. Building a Robust Video Player With Open Source Tech @ Hotstar
  2. 2. Basics First ● Media Container Formats ● Encoding Formats ● Some common Terms --- ○ Video Resolution ○ Aspect Ratio ○ Frame Rate ○ Bitrate
  3. 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. 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. 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. 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. 7. ABR Technologies Relevant to us for now: HLS, DASH HLS --- HTTP Live Streaming (HLS) DASH --- Dynamic Adaptive Streaming over HTTP
  8. 8. HLS(HTTP Live Streaming)
  9. 9. DASH(Dynamic Adaptive Streaming For HTTP)
  10. 10. HLS vs DASH ● Proprietary ● Codec Agnostic ● No DRM method specified ● HEVC
  11. 11. Content Protection- Digital Rights Management DRM technologies use encryption to protect the content prior to or during streaming, downloading or other transfer.
  12. 12. DRM encoding at source
  13. 13. DRM decryption at Player
  14. 14. Basic Player Architecture
  15. 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. 16. DASH.js Architecture
  17. 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. 18. Performance Improvements Will list these during the talk
  19. 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. 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

    Be the first to comment

    Login to see the comments

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

Views

Total views

149

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×