Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

@ducanh2912/react-hls-player

Package Overview
Dependencies
0
Maintainers
1
Versions
23
Issues
File Explorer

Advanced tools

@ducanh2912/react-hls-player

A simple and easy to use react component for playing an hls live stream

    3.3.5latest
    GitHub

Version published
Maintainers
1
Weekly downloads
467
increased by8.35%

Weekly downloads

Changelog

Source

3.3.5

Patch Changes

  • 11ae044: Updated dependencies, added "type": "module" to package.json (the package will still export a .cjs file, however)

Readme

Source

React HLS Player

NPM Downloads All Contributors Libraries.io dependency status for latest release npm bundle size

Introduction

react-hls-player is a simple HLS live stream player. It uses hls.js to play your hls live streams if your browser supports HTML5 video and MediaSource Extension.

Examples

Using the ReactHlsPlayer component

import React from "react"; import ReactDOM from "react-dom/client"; import ReactHlsPlayer from "@ducanh2912/react-hls-player"; const container = document.getElementById("app"); if (!container) throw new Error("Failed to find root element."); ReactDOM.createRoot(container).render( <ReactHlsPlayer src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" autoPlay={false} controls={true} width="100%" height="auto" /> );

Using hlsConfig (advanced use case)

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

import React from "react"; import ReactDOM from "react-dom/client"; import ReactHlsPlayer from "@ducanh2912/react-hls-player"; const container = document.getElementById("app"); if (!container) throw new Error("Failed to find root element."); ReactDOM.createRoot(container).render( <ReactHlsPlayer src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" hlsConfig={{ maxLoadingDelay: 4, minAutoBitrate: 0, lowLatencyMode: true, }} /> );

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 ReactDOM from "react-dom/client"; import ReactHlsPlayer from "@ducanh2912/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} src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" /> ); } const container = document.getElementById("app"); if (!container) throw new Error("Failed to find root element."); ReactDOM.createRoot(container).render(<MyCustomComponent />);

You can also listen to events of the video

import React from "react"; import ReactDOM from "react-dom/client"; import ReactHlsPlayer from "@ducanh2912/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://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" /> ); } const container = document.getElementById("app"); if (!container) throw new Error("Failed to find root element."); ReactDOM.createRoot(container).render(<MyCustomComponent />);

Props

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

PropDescription
src String, requiredThe hls url that you want to play
autoPlay BooleanAutoplay when component is ready. Defaults to false
controls BooleanWhether or not to show the playback controls. Defaults to false
width NumberVideo width. Defaults to 100%
height NumberVideo height. Defaults to auto
hlsConfig Objecthls.js config, you can see all config here
playerRef RefObjectPass in your own ref to interact with the video player directly. This will override the default ref.

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Marco Chavez

💻

Chris Short

💻

DuCanhGH

💻

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

Keywords

FAQs

Last updated on 07 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc