# React HLS Player ![NPM Downloads](https://img.shields.io/npm/dm/react-hls-player?style=flat-square) [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-) ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/react-hls-player) ![npm bundle size](https://img.shields.io/bundlephobia/min/react-hls-player) ## Introduction `react-hls-player` is a simple HLS live stream player. It uses [hls.js](https://github.com/video-dev/hls.js) to play your hls live stream if your browser supports `html 5 video` and `MediaSource Extension`. ## Examples ### Using the ReactHlsPlayer component ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import ReactHlsPlayer from 'react-hls-player'; ReactDOM.render( , document.getElementById('app') ); ``` ### Using hlsConfig (advanced use case) All available config properties can be found on the [Fine Tuning](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) section of the Hls.js API.md ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import ReactHlsPlayer from 'react-hls-player'; ReactDOM.render( , document.getElementById('app') ); ``` ### Using playerRef The `playerRef` returns a ref to the underlying video component, and as such will give you access to all video component properties and methods. ```javascript import React from 'react'; import ReactHlsPlayer from 'react-hls-player'; function MyCustomComponent() { const playerRef = React.useRef(); function playVideo() { playerRef.current.play(); } function pauseVideo() { playerRef.current.pause(); } function toggleControls() { playerRef.current.controls = !playerRef.current.controls; } return ( ); } ReactDOM.render(, document.getElementById('app')); ``` You can also listen to events of the video ```javascript import React from 'react'; import ReactHlsPlayer from 'react-hls-player'; function MyCustomComponent() { const playerRef = React.useRef(); React.useEffect(() => { function fireOnVideoStart() { // Do some stuff when the video starts/resumes playing } playerRef.current.addEventListener('play', fireOnVideoStart); return playerRef.current.removeEventListener('play', fireOnVideoStart); }, []); React.useEffect(() => { function fireOnVideoEnd() { // Do some stuff when the video ends } playerRef.current.addEventListener('ended', fireOnVideoEnd); return playerRef.current.removeEventListener('ended', fireOnVideoEnd); }, []); return ( ); } ReactDOM.render(, document.getElementById('app')); ``` ## Props All [video properties](https://www.w3schools.com/tags/att_video_poster.asp) are supported and passed down to the underlying video component | Prop | Description | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | | src `String`, `required` | 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](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) | | playerRef `React Ref` | Pass in your own ref to interact with the video player directly. This will override the default ref. | ### Additional Notes By default, the HLS config will have `enableWorker` set to `false`. There have been issues with the HLS.js library that breaks some React apps, so I've disabled it to prevent people from running in to this issue. If you want to enable it and see if it works with your React app, you can simply pass in `enableWorker: true` to the `hlsConfig` prop object. [See this issue for more information](https://github.com/video-dev/hls.js/issues/2064) ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Marco Chavez}
💻

_{Chris Short}
💻 📆

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

	Stars	Issues	Version	Updated	Created
react-hls-player	114	29	3.0.7	3 years ago	5 years ago
react-jplayer	142	9	7.1.3	6 years ago	7 years ago
react-native-video	7,006	204	6.0.0	6 days ago	9 years ago
react-youtube	1,830	83	10.1.0	a year ago	10 years ago

react-hls-player vs react-jplayer vs react-native-video vs react-youtube

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past