Documentation

Radiant Media Player

Legacy web support

What is legacy support and who should use it?

As newer browsers and OSes are released on the market, older browsers and OSes become obsolete and people stop using them.

A typical example in 2021 is Internet Explorer 11. Today Internet Explorer 11 is no longer a suitable browser for the web and Microsoft itself does not want this browser to be used anymore.

Older versions of browsers and OSes also become obsolete. Supporting too much of older browsers and OSes comes at a cost not only for web developers or Web Apps that run slower but also for viewers that may not be able to enjoy the latest innovations in web development.

By default Radiant Media Player 7 and above support the following environments (this is not an exhaustive list - see our compatibility table for more information):

  • Google Chrome 61+ for desktop and Android 5+
  • Firefox 60+ for desktop and Android 5+
  • Opera 48+ for desktop and Opera 64+ for Android 5+
  • Safari for iOS 12+
  • Safari 11+ for macOS
  • MS Edge legacy 16+
  • MS Edge 79+
  • Samsung Internet 12+ for Android 5+
  • Tizen 5+ (Samsung Smart TV 2019+)
  • webOS 5+ (LG Smart TV 2020+)

Some of our customers may have a business requirements to support older browsers and OSes. This is why legacy builds exist. To provide best-effort support for older browsers and OSes that have fallen outside of mainstream usage but that may still be used in specific circumstances.

Unless you have a business requirement to use legacy builds we recommend using our standard builds - while legacy builds may help to support older browsers and OSes they are larger and slower files. Review our getting the best of two worlds strategy for best performance on all devices.

Radiant Media Player legacy builds can be used in the following environments:

  • Google Chrome 36+ for desktop and Android 5+
  • Firefox 42+ for desktop and Android 5+
  • Opera 30+ for desktop and Android 5+
  • Safari for iOS 10+
  • Safari 10+ for macOS
  • Internet Explorer 11
  • MS Edge legacy 12+
  • MS Edge 79+
  • Samsung Internet 12+ for Android 5+
  • Tizen 3+ (Samsung Smart TV 2017+)
  • webOS 3+ (LG Smart TV 2016+)

Version 0.1.0 of our legacy builds support Radiant Media Player 7.2.0 features and settings.

Radiant Media Player legacy builds are provided as best effort and we do not guarantee that all current player features will work or that the player will function without bugs specific to those older environments.

Player code examples

HLS streaming (Media Source Extensions required - for example IE 11 for Windows 8+) - see this example here

<!-- Include Radiant Media Player JavaScript library - note legacy builds are versioned as 0.*.* -->
<script src="https://cdn.radiantmediatechs.com/rmp/0.1.0/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
  var src = {
    hls: 'https://your-hls-url.m3u8'
  };
  // Then we set our player settings
  var 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 add a poster frame to our player
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  // Reference to our container div 
  var elementID = 'rmp';
  // Create an object based on RadiantMP constructor
  var rmp = new RadiantMP(elementID);
  // Initialization ... and done!
  rmp.init(settings);
</script>

DASH streaming with PlayReady DRM (EME required - for example IE 11 for Windows 8.1+)

<!-- Include Radiant Media Player JavaScript library - note legacy builds are versioned as 0.*.* -->
<script src="https://cdn.radiantmediatechs.com/rmp/0.1.0/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>
  var src = {
    dash: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest.mpd'
  };
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    // passing DRM settings
    shakaDrm: {
      servers: {
        'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
        'com.microsoft.playready': 'https://drm-playready-licensing.axtest.net/AcquireLicense'
      }
    },
    shakaRequestConfiguration: {
      license: {
        headers: {
          'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.4lWwW46k-oWcah8oN18LPj5OLS5ZU-_AQv7fe0JhNjA' 
        }
      }
    }
  };
  var elementID = 'rmp';
  rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

Getting the best of two worlds

If you have to use our legacy builds and for best performance we recommend using the below script that shows how to feature detect older browsers and OSes. This will give newer browsers and OSes to our latest player builds while still covering older browsers and OSes with our legacy builds.

<div id="rmp"></div>
<script>
  var head = document.head || document.getElementsByTagName('head')[0];
  var body = document.body || document.getElementsByTagName('body')[0];
  var rmpContainer, rmpScript, rmp;
  // When Radiant Media Player JavaScript is asynchronously loaded we append player to DOM
  var _onLoadAppendPlayer = function () {
    // First we create our player container and append it to DOM
    rmpContainer = document.createElement('div');
    var elementID = 'rmp';
    rmpContainer.id = elementID;
    body.appendChild(rmpContainer);
    // Then we define our player settings as usual
    var src = {
      hls: 'https://your-hls-url'
    };
    var settings = {
      licenseKey: 'your-license-key',
      src: src,
      width: 640,
      height: 360
    };
    rmp = new RadiantMP(elementID);
    rmp.init(settings);
  };
  // Log an error if we are unable to retrieve Radiant Media Player JavaScript file
  var _onErrorLog = function () {
    console.log('could not load Radiant Media Player JavaScript file');
  };
  // We create our script tag with async set to true and append it to our head
  // When it loads we create our player instance
  rmpScript = document.createElement('script');
  // Feature detection for newer browsers that support module import/export
  var newerBrowsers = 'noModule' in HTMLScriptElement.prototype;
  if (newerBrowsers) {
    rmpScript.src = 'https://cdn.radiantmediatechs.com/rmp/7.2.0/js/rmp.min.js';
  } else {
    rmpScript.src = 'https://cdn.radiantmediatechs.com/rmp/0.1.0/js/rmp.min.js';
  }
  rmpScript.async = true;
  rmpScript.addEventListener('load', _onLoadAppendPlayer);
  rmpScript.addEventListener('error', _onErrorLog);
  head.appendChild(rmpScript);
</script>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2022 Radiant Media Player. All rights reserved.