Radiant Media Player

Working with AMP



Scope of support

We support Google AMP markup with Radiant Media Player through amp-iframe. Because JavaScript support in an AMP environment is limited Google recommends using iframe for media embeds. We will thus use iframe embedding with Radiant Media Player to get AMP-ready.


Complete example

First we will set up a page for the content that will displayed through an amp-iframe:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Radiant Media Player - Example Apple HLS</title>
    <style>
      /* This CSS is required to avoid layout issues */
      html,
      body {
        height: 100%;
        width: 100%;
        background-color: #000;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.radiantmediatechs.com/rmp/4.5.8/js/rmp.min.js" 
      integrity="sha384-N8iccZx4+o/JQEudKK8sDITl0HDIppkYGCW9hAuTu8vIfjfUKAY6Hi20rDh5Q22g"
      crossorigin="anonymous"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        delayToFade: 3000,
        // We use iframe mode
        iframeMode: true,
        sharing: true,
        bitrates: bitrates,
        poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
      };
      var elementID = 'rmpPlayer';
      var rmp = new RadiantMP(elementID);
      rmp.init(settings);
    </script>
  </body>
</html>

Following is a known good AMP layout working with Radiant Media Player that passes validation. This example uses iframe with placeholder in order to have the player appearing on top of document (see here for more information).

<!DOCTYPE html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Hello, AMPs</title>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <link rel="canonical" href="https://www.radiantmediaplayer.com/docs/latest/amp-iframe.html">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" width="640" height="360" layout="responsive" allowfullscreen style="border:none;" src="https://www.rmp-streaming.com/iframe/iframe-content-amp.html">
    <amp-img layout="fill" src="https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg" placeholder></amp-img>
  </amp-iframe>
</body>
</html>

See it at work here.

In order to complete your validation of AMP content with Google you will also need to mark up your video content with structured data. JSON-LD is the recommended way to do so. More information can be found here.

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