Radiant Media Player is a cross-device HTML5 video & audio player capable of displaying HLS, DASH or progressive download content. 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 implemented in any web environments (browsers, mobile & OTT apps) and configured through various player settings. Our support team is also available to help you get started with Radiant Media Player.
We have made a commitment to work closely with our customers to make Radiant Media Player a fast, reliable and developer-friendly product. Your success is our success.
Radiant Media Player does not provide encoding or hosting services for media content - our focus is on building a great HTML5 media player. To use Radiant Media Player you will need to encode and host your video/audio files or use a 3rd-party service provider that can help you with that - see our list of partners for a few suggestion.
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> <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/9.16.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: 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' ] } }; // Reference to our container div const elementID = 'rmp'; // Create an object based on RadiantMP constructor const rmp = new RadiantMP(elementID); // Initialization ... and done! rmp.init(settings); </script> </body> </html>
<!DOCTYPE html> <!-- Our HTML5 document must start with a valid DOCTYPE --> <html> <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 async 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: 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' ] }, // Here we pass the ID of the player container so that the core library may automatically initialise player when it finishes loading asyncElementID: 'rmp' }; // We push the player settings to a global rmpAsyncPlayers variable if (typeof window.rmpAsyncPlayers === 'undefined') { window.rmpAsyncPlayers = []; } window.rmpAsyncPlayers.push(settings); </script> <!-- Include Radiant Media Player JavaScript at the bottom of your page - note the async attribute --> <script async src="https://cdn.radiantmediatechs.com/rmp/9.16.4/js/rmp.min.js"></script> </body> </html>
Using Radiant Media Player as a ES2015 module requires self-hosting of player files - this is only available for paid Radiant Media Player customers
<!DOCTYPE html> <!-- Our HTML5 document must start with a valid DOCTYPE --> <html> <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 async player configuration options --> <script type="module"> // import Radiant Media Player as a ES2015 module import RadiantMP from 'radiantmediaplayer/dist/rmp.module.js'; // 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: 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); rmp.init(settings); </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-2024 Radiant Media Player. All Rights Reserved.