This article describes in detail how to integrate CDN Mesh Delivery into your Radiant Media Player.
We have built optimized plugins for Radiant Media Player from v4.7.1.
Not into tutorials? |
Step 1: Install Radiant Media Player build
Include these sources in the HTML <head>:
<!-- Radiant Media Player build -->
<script src="//cdn.radiantmediatechs.com/rmp/5.7.8/js/rmp.min.js"></script>
Step 2: Set up Radiant Media Player and Streamroot
Include the following code in the HTML <body>:
HLS (hls.js)
<div id="rmpPlayer"></div>
<script>
var src = {
hls: 'YOUR_PLAYLIST_URL',
};
var streamrootConfig = {
type: 'hlsjs',
streamrootKey: 'YOUR_STREAMROOT_KEY',
dnaConfig: {},
};
var settings = {
licenseKey: 'YOUR_RADIANT_LICENSE_KEY',
streamrootConfig: streamrootConfig,
src: src,
// Recommended settings for HLS streaming
hlsJSMaxBufferSize: 0,
hlsJSMaxBufferLength: 30,
hlsJSLiveSyncDuration: 30, // Not needed for VoD streams
forceHlsJSOnMacOSIpadOSSafari: true //To activate Streamroot on Safari Mac OS. Only from player 5.4.10+.
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>
MPEG-DASH (Shaka Player)
<div id="rmpPlayer"></div>
<script>
var src = {
dash: 'YOUR_PLAYLIST_URL',
};
var streamrootConfig = {
type: 'shakaplayer',
streamrootKey: 'YOUR_STREAMROOT_KEY',
dnaConfig: {},
};
var settings = {
licenseKey: 'YOUR_RADIANT_LICENSE_KEY',
streamrootConfig: streamrootConfig,
src: src,
// Recommended settings for DASH streaming
shakaManifestDashDefaultPresentationDelay: 30
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| YOUR_STREAMROOT_KEY | Yes | The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard. |
| YOUR_RADIANT_LICENSE_KEY | Yes | The Radiant Media Player license keys. |
| YOUR_PLAYLIST_URL | Yes | Your HLS or DASH playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |