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.6.0/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.6.0/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,
      contentMetadata: {
        poster: [
          'https://your-poster-url-1.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,
      contentMetadata: {
        poster: [
          'https://your-poster-url-2.jpg'
        ]
      }
      speed: 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.6.0/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,
      contentMetadata: {
        poster: [
          'https://your-poster-url-1.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,
      contentMetadata: {
        poster: [
          'https://your-poster-url-2.jpg'
        ]
      },
      speed: 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.6.0/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.

Multiple instances

Player

Streaming

Styling and branding

Live and DVR

Related & playlist content

Analytics

Social media

Desktop apps with Electron

Google Cast and AirPlay casting

Fire TV apps

Ads

Outstream video ads

Server side ad insertion (SSAI)

Mobile applications

DRM & HLSe

360/VR video

Offline

HEVC, AV1, AC-3 & 4K video

HTML5 audio

Peer-to-peer streaming

Guides

Helpers

Multiple instances