React is a popular JavaScript library for building user interfaces.
Radiant Media Player can easily be used in a React app - in this guide we will review how.
We support the following environment for using Radiant Media Player with React framework:
While it is possible that Radiant Media Player would work with previous versions of React, those versions have not been tested by us.
In this guide we will use the Build a React app from Scratch with Vite environment. We can install this development environment with:
npm create vite@latest player-app -- --template react
We can now run the following command line to check the reference app:
cd player-app npm install npm run dev
First we need to add Radiant Media Player player files to our React app. We are using self-hosting of player
files for this guide. The self-hosted package folder
is named radiantmediaplayer-*.*.* where *.*.* is player version. In this example
we have renamed that folder to radiantmediaplayer. We now add that folder to the
public folder of our React project.
Then we need to add Radiant Media Player as a module to the React project. In the src/assets folder we now create a player folder and we
add player module files:
rmp.min.d.mtsrmp.min.mjsRadiant Media Player is now part of our React project and new instances of the player can be created anywhere in our application.
We now create a player.jsx file in the src folder
and add the following code to create our React player component.
import { Component } from "react";
import RadiantMP from "./assets/player/rmp.min.mjs";
class Player extends Component {
render() {
return <div id="rmp"></div>;
}
componentDidMount() {
const src = {
hls: "https://your-hls-stream-url.m3u8"
};
const settings = {
licenseKey: "your-license-key",
src,
width: 640,
height: 360,
pathToRmpFiles: "/radiantmediaplayer/",
};
const elementID = "rmp";
const rmp = new RadiantMP(elementID);
async function initRmpPlayer() {
try {
await rmp.init(settings);
} catch (error) {
console.error("Radiant Media Player failed to initialize", error);
}
}
initRmpPlayer();
}
}
export default Player;
We can now import our player component into the App.jsx file
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Player from './player.jsx'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<Player />
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
Last we need to remove the React StrictMode in the main.jsx file otherwise the
player will render
twice and this will cause unwanted viewing behaviour:
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<App />
)
We can now save our changes and see our player with npm run dev.
©2015-2025 Radiant Media Player. All Rights Reserved.