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 dependency status for latest release npm bundle size


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.




Using the ReactHlsPlayer component



Using hlsConfig (advanced use case)





Using playerRef








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