@krokky/react-hls-player v0.1.1

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.

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"
    />
  );
};