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 Create React App environment. This is a good start point for building a single-page application in React. We can install this development environment with:
npx create-react-app my-app cd my-app npm start
At http://localhost:3000/ we can now see the demo React app.
First we need to add Radiant Media Player as an external library to our React app. This is done in the
public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- Include Radiant Media Player library in your <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Then we will create our Player component in a separated src/Player.js file:
import React, { Component } from 'react';
class Player extends Component {
render() {
return (
<div id="rmp"></div>
);
}
componentDidMount() {
const src = {
hls: 'your-hls-url'
};
const settings = {
licenseKey: 'your-license-key',
src: src,
width: 640,
height: 360
};
const elementID = 'rmp';
const rmp = new window.RadiantMP(elementID);
rmp.init(settings);
}
}
export default Player;
We will now inject our player component in src/App.js:
import logo from './logo.svg';
import './App.css';
import Player from './Player';
function App() {
return (
<div className="App">
<header className="App-header">
{ /* Our player component goes here */ }
<Player />
<img src={logo} className="App-logo" alt="logo" />
<p>Edit <code>src/App.js</code> and save to reload.</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React</a>
</header>
</div>
);
}
export default App;
Last we need to remove the React StrictMode in the src/index.js file otherwise the player will render
twice:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
reportWebVitals();
We can now save our changes and see the live result at http://localhost:3000/!
©2015-2024 Radiant Media Player. All Rights Reserved.