Radiant Media Player

Working with CloudFlare Rocket Loader



CloudFlare Rocket Loader

Rocket Loader is a CloudFlare-provided general-purpose asynchronous JavaScript loader coupled with a lightweight virtual browser which can safely run any JavaScript code after window.onload.

While CloudFlare Rocket Loader could provide a performance boost for your site it may cause conflict with more advanced scripts especially those that require the loading of other scripts. Depending on your player configuration you may find yourself unable to properly use CloudFlare Rocket Loader with Radiant Media Player and this may cause delay or failure to reach player readiness or slow playback start. This article helps to avoid common pitfalls for using Radiant Media Player with a CloudFlare Rocket Loader enabled site.

Configuring Radiant Media Player for CloudFlare Rocket Loader

You have 2 options when configuring CloudFlare Rocket Loader for your site:

  • Manual Mode (this is the recommended option when using Radiant Media Player)
  • Automatic Mode

Let us start with the easy one: Manual Mode. In Manual Mode you simply must not include the data-cfasync="true" attribute on the script tag that references Radiant Media Player core library (rmp.min.js).

In Automatic Mode we will need to tell CloudFlare Rocket Loader to ignore Radiant Media Player core library and the player required dependencies for your set up. Let us run through a concrete example. In the below player configuration, we use HLS streaming with Google IMA video ads. So on top of loading Radiant Media Player core library (rmp.min.js) we will need to load hls.js and Google IMA as dependencies. More information on player dependencies can be found here.

Player code example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>TODO supply a title</title>
  <!-- Here you will include CloudFlare Rocket Loader script and configuration  -->
</head>
<body>
<!-- Include Radiant Media Player dependencies first -->
<!-- In this case hls.js and Google IMA - note the data-cfasync="false" attribute -->
<script data-cfasync="false" src="https://cdn.radiantmediatechs.com/rmp/4.6.26/hls/hls.min.js"></script>
<script data-cfasync="false" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<!-- Include Radiant Media Player core library after dependencies -->
<script data-cfasync="false" src="https://cdn.radiantmediatechs.com/rmp/4.6.29/js/rmp.min.js" 
  integrity="sha384-sMI2HuoPulvUlSUh7354Ye9LU4jDAFk7kVVXNDk4mCW3O7fV5uWX78fn9MRjjScO"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  height: 360,
  skin: 's1',
  ads: true,
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml',
  useRmpVastOnImaLoadError: false,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to our container div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>
</body>
</html>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.