
Research
Security News
The Landscape of Malicious Open Source Packages: 2025 Mid‑Year Threat Report
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
@ducanh2912/react-hls-player
Advanced tools
A simple and easy to use react component for playing an hls live stream
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
.
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"
/>
);
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,
}}
/>
);
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 />);
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 RefObject | Pass in your own ref to interact with the video player directly. This will override the default ref. |
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
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!
FAQs
A simple and easy to use react component for playing an hls live stream
We found that @ducanh2912/react-hls-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
Security News
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.