React HLS video player with an example

React HLS video player with an example; HTTP live streaming (HLS) is one of the most used video streaming protocols on the web, HLS creates multiple chunk files from main streamable video files and plays them back as video. HLS is developed by Apple but now is used widely.

You can download the working example of a tooltip component https://github.com/technostuf/react-hls-video-example

Create a React application

Create a React app using the below command.

 npx create-react-app react-hls-video-example

The above command will create a new folder with the app name so you need to move into that folder, use the below command to change the directory.

 cd react-bootstrap-tooltip-example

Install react-hls-player library

After creating react app we need to install react-hls-player from npm. it used the hls.js for the play video or live streaming.

 npm i react-hls-player --save

Add code to the file

Add HLS player code in the VideoPlayerComponent.js file, We have created a separate file to demonstrate an HLS video player demo

import React, { useEffect } from "react";
import 'bootstrap/dist/css/bootstrap.css';
import ReactHlsPlayer from 'react-hls-player';

const VideoPlayerComponent = () => {
    const playerRef = React.useRef();

    function playVideo() {
        playerRef.current.play();
    }

    function pauseVideo() {
        playerRef.current.pause();
    }

    function toggleControls() {
        playerRef.current.controls = !playerRef.current.controls;
    }

    return (
        <div>
            <div class="row d-flex justify-content-center text-center">
                <h1>React bootstrap hls player - technostuf.com</h1>
                <hr />
                <div className="col-md-8">
                    <div className="row">
                        <ReactHlsPlayer
                            src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
                            autoPlay={true}
                            controls={true}
                            width="100%"
                            height="auto"
                            hlsConfig={{
                                maxLoadingDelay: 4,
                                minAutoBitrate: 0,
                                lowLatencyMode: true,
                            }}
                        />
                    </div>

                </div>
                <h1>React bootstrap hls player with playerRef  - technostuf.com</h1>
                <hr />
                <div className="col-md-8">
                    <ReactHlsPlayer
                        autoPlay={true}
                        width="100%"
                        height="auto"
                        controls={true}
                        playerRef={playerRef}
                        src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
                    />
                    <div className="row">
                        <div className="col-md-1">
                            <button class="btn btn-primary" type="button" onClick={playVideo} >Play</button>
                        </div>
                        <div className="col-md-1">
                            <button class="btn btn-primary" type="button" onClick={pauseVideo} >Pause</button>
                        </div>
                        <div className="col-md-4">
                            <button class="btn btn-primary" type="button" onClick={toggleControls} >Hide/Show Controls</button>
                        </div>
                    </div>
                </div>

            </div>
        </div >
    )
}
export default VideoPlayerComponent;

Useful Props

src: The HLS video URL you want to play
autoPlay: Accept boolean value, by default, is false
controls: Accept boolean value, set true if you want to display controls in a player like play button, pause button, etc… The default value is false
width: Video width, Accept number
height: Video height, Accept number
hlsConfig: hls.js config, is used for more advanced configurations like maxLoadingDelay, debug, etc… See in detail
playerRef: This is the video player reference, you can use it to call the player events

Finally, you have to import both files into App.js.

import './App.css';
import VideoPlayerComponent from './VideoPlayerComponent';

function App() {
  return (
    <div className="App">
      <VideoPlayerComponent />
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

  npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download/clone the working example.

https://github.com/technostuf/react-hls-video-example