React.js Project to Build HLS Video Player to Render & Play HLS Live Video Streaming in Browser Using Javascript

 

React HLS Player

NPM Downloads All Contributors Libraries.io dependency status for latest release npm bundle size

Introduction

react-hls-player is a simple HLS live stream player. It uses hls.js to play your hls live stream if your browser supports html 5 video and MediaSource Extension.

Examples

 

 

Using the ReactHlsPlayer component


 

 

Using hlsConfig (advanced use case)

 

 

 

 

Using playerRef

 

 

 

 

 

 

Props

All video properties are supported and passed down to the underlying video component

Prop Description
src Stringrequired The hls url that you want to play
autoPlay Boolean Autoplay when component is ready. Defaults to false
controls Boolean Whether or not to show the playback controls. Defaults to false
width Number Video width. Defaults to 100%
height Number Video height. Defaults to auto
hlsConfig Object hls.js config, you can see all config here
playerRef React Ref Pass in your own ref to interact with the video player directly. This will override the default ref.

 

Leave a Reply