react-hls-video-player v3.2.4

React HLS Video Player

Introduction

react-hls-video-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.

Install

yarn add react-hls-video-player or npm i react-hls-video-player

Examples

Using the ReactHlsPlayer component

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

ReactDOM.render(
    <ReactHlsPlayer
        src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.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 'react-hls-video-player'

ReactDOM.render(
    <ReactHlsPlayer
        src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.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 'react-hls-video-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}
            src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
        />
    )
}

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

You can also listen to events of the video

import React from 'react'
import ReactHlsPlayer from 'react-hls-video-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://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
        />
    )
}

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

Props

All video properties are supported and passed down to the underlying video component

NextJS Example

To use in NextJS, wrap the ReactHlsPlayer in a client component to ensure client side rendering of the component.

'use client'
import dynamic from 'next/dynamic'
import { ReactHlsPlayerProps } from 'react-hls-video-player'

const ReactHlsPlayer = dynamic(() => import('react-hls-video-player').then((mod) => mod.default), {
    ssr: false,
})

export default function ClientHlsPlayer({
    src,
    className,
    autoPlay = false,
    controls = true,
    ...props
}: ReactHlsPlayerProps) {
    return (
        <ReactHlsPlayer
            src={src}
            controls={controls}
            autoPlay={autoPlay}
            className={className || ''}
            {...props}
        />
    )
}

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

This project follows the all-contributors specification. Contributions of any kind welcome!