Radiant Media Player

Multiple instances



Multiple instances

This section highlights best practices for using multiple player instances on the same web page.

  • Include player library rmp.min.js only once on your page
  • It is recommended to preload player CSS in your <head> for faster painting of player

Here is a complete example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!-- Here we preload our CSS; note the required id rmp-dress-code on the link tag -->
  <!-- You can change skin by replacing rmp-s1.min.css with rmp-s*.min.css (where * is 1, 2, 3 or 4) -->
  <link type="text/css" rel="stylesheet" id="rmp-dress-code" href="https://cdn.radiantmediatechs.com/rmp/5.0.3/css/rmp-s1.min.css">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- Only include Radiant Media Player core JavaScript file once-->
  <script src="https://cdn.radiantmediatechs.com/rmp/5.0.3/js/rmp.min.js"></script>
  <!-- First player container-->
  <div id="rmpPlayer1"></div>
  <!-- Second player container-->
  <div id="rmpPlayer2"></div>
  <script>
    // Settings for player 1
    var src1 = {
      hls: 'https://your-hls-url-1.m3u8'
    };
    var settings1 = {
      licenseKey: 'your-license-key',
      src: src1,
      width: 640,
      height: 360,
      poster: 'https://your-poster-url.jpg'
    };
    // Settings for player 2
    var src2 = {
      hls: 'https://your-hls-url-2.m3u8'
    };
    var settings2 = {
      licenseKey: 'your-license-key', 
      src: src2,
      width: 640,
      height: 360,
      poster: 'https://your-poster-url.jpg',
      nav: true
    };
    // Elements
    var element1 = 'rmpPlayer1';
    var element2 = 'rmpPlayer2';
    // Create new objects based on RadiantMP constructor
    var rmp1 = new RadiantMP(element1);
    var rmp2 = new RadiantMP(element2);
    // Initiating both players 
    rmp1.init(settings1);
    rmp2.init(settings2);
  </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!-- Here we preload our CSS; note the required id rmp-dress-code on the link tag -->
  <!-- You can change skin by replacing rmp-s1.min.css with rmp-s*.min.css (where * is 1, 2, 3 or 4) -->
  <link type="text/css" rel="stylesheet" id="rmp-dress-code" href="https://cdn.radiantmediatechs.com/rmp/5.0.3/css/rmp-s1.min.css">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- First player container-->
  <div id="rmpPlayer1"></div>
  <!-- Second player container-->
  <div id="rmpPlayer2"></div>
  <script>
    // Settings for player 1
    var src1 = {
      hls: 'https://your-hls-url-1.m3u8'
    };
    var settings1 = {
      licenseKey: 'your-license-key',
      src: src1,
      width: 640,
      height: 360,
      poster: 'https://your-poster-url.jpg',
      asyncElementID: 'rmpPlayer1'
    };
    // Settings for player 2
    var src2 = {
      hls: 'https://your-hls-url-2.m3u8'
    };
    var settings2 = {
      licenseKey: 'your-license-key', 
      src: src2,
      width: 640,
      height: 360,
      poster: 'https://your-poster-url.jpg',
      nav: true,
      asyncElementID: 'rmpPlayer2'
    };
    // We push both player settings to a global rmpAsyncPlayers variable
    if (typeof window.rmpAsyncPlayers === 'undefined') {
      window.rmpAsyncPlayers = [];
    }
    window.rmpAsyncPlayers.push(settings1);
    window.rmpAsyncPlayers.push(settings2);
  </script>
  <!-- Async load Radiant Media Player core JavaScript file once-->
  <script async src="https://cdn.radiantmediatechs.com/rmp/5.0.3/js/rmp.min.js"></script>
</body>
</html>

Each instance of Radiant Media Player can then be manipulated with our JavaScript API.

When multiple players are on the same page only the first one (first init called) gets Google Cast support.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.