react-hls-player

A simple React HTTP Live Streaming player. It uses hls.js to play your hls live stream if your browser supports html 5 video and MediaSource Extension.

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import ReactHlsPlayer from 'react-hls-player';

ReactDOM.render(
  <ReactHlsPlayer
    controls
    src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
  />,
  document.getElementById('app')
);

Props

All video properties are supported and pass to the video element.

| Prop | Type | Description | | -------------------- | -------------------- | ------------------------------------------------------------ | | src | String, required | The hls url that you want to play | | hlsConfig Object | Object | hls.js config, you can see all config here | | autoPlay | Boolean | Autoplay when component is ready. Defaults to false (Sometimes it may not work. You need to check this) | | ...other video props | | All video properties are supported. |

Ref

You can access video element, hls instances and initPlayer function through ref.

import React, {useEffect} from 'react';
import ReactDOM from 'react-dom';
import ReactHlsPlayer from 'react-hls-player';

const App = () => {
  const hlsRef = useRef(null);

  useEffect(() => {
    console.log(hlsRef.current); // {getHlsInstance: ƒ (), initPlayer: ƒ (), video: video}
  }, []);

  return (
    <ReactHlsPlayer
      ref={hlsRef}
      controls
      src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
    />
  );
};