This section highlights best practices for using multiple player instances on the same web page.
Here is a complete example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 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.11.5/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.11.5/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, initial-scale=1, shrink-to-fit=no"> <!-- 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.11.5/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.11.5/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.