Radiant Media Player is a versatile cross-device HTML5 video & audio player. You can stream to Radiant Media Player with HLS, MPEG-DASH or progressive download streaming. It can handle live, DVR or on-demand content and sports a wide array of features from video advertising to 360° video and DRM. Radiant Media Player can easily be added to any web environments (browsers, mobile & OTT apps): it just is a piece of HTML and JavaScript, the player will automatically adapt its layout to yours. Radiant Media Player is highly customisable with over 200 player settings and a fully documented API to build about anything on top of our player. Our support team is also available to help you get the most out of Radiant Media Player. Your success is our success.
Radiant Media Player does not provide encoding or hosting services for video content - we just provide the player. Therefore to use Radiant Media Player you will need to encode and host your content yourself or use a 3rd-party service provider that can help you with that - any standard-compliant streaming provider will work with Radiant Media Player.
We provide a player creation user interface to rapidly obtain a player code to be copied/pasted into your web page or CMS. This player creator does NOT include all player features, just some commonly used ones, refer to our documentation for other use-cases.
Radiant Media Player must be included in a well-formed HTML5 document. This means a web-page with a valid HTML5 DOCTYPE, <html>, <head> and <body> tags and other elements that are commonly available in today's web.
To set up Radiant Media Player on your page you must have:
Here is a complete example:
<!DOCTYPE html> <!-- Our HTML5 document must start with a valid DOCTYPE --> <html lang="en"> <head> <meta charset="UTF-8"> <!-- We add a viewport meta tag for best rendering on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TODO supply a title</title> </head> <body> <!-- Include Radiant Media Player JavaScript library --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.js"></script> <!-- Add a div container with a unique id - video and UI elements will be appended to this container --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // First we must provide a streaming source to the player - in this case an HLS feed const src = { hls: 'https://your-hls-url.m3u8' // You may provide different source types - the player will automatically pick the best option // dash: 'https://your-dash-url.mpd' // mp4: ['https://your-mp4-url.mp4'] }; // Then we set our player settings const settings = { licenseKey: 'your-license-key', src, // The player will automatically resize itself based on context and those reference width/height values width: 640, height: 360, // Let us select a skin skin: 's1', // Let us add a poster frame to our player contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; // Player ID const elementID = 'rmp'; // Create an object based on RadiantMP constructor const rmp = new RadiantMP(elementID); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { // This should not happen often, but when it happens it could be due to: // invalid license key|cannot find container element (or PARENT)|no playback support console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script> </body> </html>
<!DOCTYPE html> <!-- Our HTML5 document must start with a valid DOCTYPE --> <html lang="en"> <head> <meta charset="utf-8"> <title>My video app</title> <!-- we map rmp to our cloud player file --> <script type="importmap"> { "imports": { "rmp": "https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.mjs" } } </script> </head> <body> <!-- Player container element --> <div id="rmp"></div> <script type="module" src="/main.js"></script> </body> </html> ... // main.js // import Radiant Media Player as a ES2015 module (cloud-player) import RadiantMP from 'rmp'; // First we must provide a streaming source to the player - in this case an HLS feed const src = { hls: 'https://your-hls-url.m3u8' // You may provide different source types - the player will automatically pick the best option // dash: 'https://your-dash-url.mpd' // mp4: ['https://your-mp4-url.mp4'] }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const elementID = 'rmp'; const rmp = new RadiantMP(elementID); // Player initialisation async function initRmpPlayer() { try { await rmp.init(settings); } catch (error) { // This should not happen often, but when it happens it could be due to: // invalid license key|cannot find container element (or PARENT)|no playback support console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer();
<!DOCTYPE html> <!-- Our HTML5 document must start with a valid DOCTYPE --> <html lang="en"> <head> <meta charset="UTF-8"> <!-- We add a viewport meta tag for best rendering on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TODO supply a title</title> </head> <body> <!-- Add a div container with a unique id - video and UI elements will be appended to this container --> <div id="rmp"></div> <!-- Set up player configuration options --> <script type="module"> // import Radiant Media Player as a ES2015 module import RadiantMP from 'radiantmediaplayer/dist/rmp.min.mjs'; // First we must provide a streaming source to the player - in this case an HLS feed const src = { hls: 'https://your-hls-url.m3u8' // You may provide different source types - the player will automatically pick the best option // dash: 'https://your-dash-url.mpd' // mp4: ['https://your-mp4-url.mp4'] }; // Then we set our player settings const settings = { licenseKey: 'your-license-key', src, // The player will automatically resize itself based on context and those reference width/height values width: 640, height: 360, pathToRmpFiles: 'radiantmediaplayer/', // Let us select a skin skin: 's1', // Let us add a poster frame to our player contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const elementID = 'rmp'; const rmp = new RadiantMP(elementID); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { // This should not happen often, but when it happens it could be due to: // invalid license key|cannot find container element (or PARENT)|no playback support console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script> </body> </html>
Now that we have covered how to set up a basic player code, you can browse our documentation to review all the features Radiant Media Player has to offer, popular sections include:
©2015-2025 Radiant Media Player. All Rights Reserved. ✝