@gumlet/react-hls-player

React Player HLS

Introduction

@gumlet/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.

npm i @gumlet/react-hls-player

Examples

Using the ReactHlsPlayer component

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

ReactDOM.render(
  <ReactHlsPlayer
    src="https://video.gumlet.io/5f462c1561cf8a766464ffc4/635789f017629894d4d125a4/main.m3u8"
    autoPlay={false}
    controls={true}
    width="100%"
    height="auto"
  />,
  document.getElementById('app')
);

Using hlsConfig (advanced use case)

All available config properties can be found on the Fine Tuning section of the Hls.js API.md

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

ReactDOM.render(
  <ReactHlsPlayer
    src="https://video.gumlet.io/5f462c1561cf8a766464ffc4/635789f017629894d4d125a4/main.m3u8"
    hlsConfig={{
      maxLoadingDelay: 4,
      minAutoBitrate: 0,
      lowLatencyMode: true,
    }}
  />,
  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.

import React from 'react';
import ReactHlsPlayer from '@gumlet/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 (
    <ReactHlsPlayer
      playerRef={playerRef}
      getHLSRef={(hlsJSObject) => { console.log(hlsJSObject); }}
      src="https://video.gumlet.io/5f462c1561cf8a766464ffc4/635789f017629894d4d125a4/main.m3u8"
    />
  );
}

ReactDOM.render(<MyCustomComponent />, document.getElementById('app'));

You can also listen to events of the video

import React from 'react';
import ReactHlsPlayer from '@gumlet/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 (
    <ReactHlsPlayer
      playerRef={playerRef}
      src="https://video.gumlet.io/5f462c1561cf8a766464ffc4/635789f017629894d4d125a4/main.m3u8"
    />
  );
}

ReactDOM.render(<MyCustomComponent />, document.getElementById('app'));

Props

All video properties 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
playerRef React Ref	Pass in your own ref to interact with the video player directly. This will override the default ref.
getHLSRef Callback	Get the HLS player object reference in a callback, as soon as the player object is defined.

Maintainer

This library is maintained by Gumlet.com