Radiant Media Player

Working with AMP



Guide sections


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.


Usage 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/5.0.3/js/rmp.min.js"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var src = {
        hls: 'https://your-hls-url.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        // We use iframe mode
        iframeMode: true,
        sharing: true,
        src: src,
        poster: 'https://your-poster-url.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>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello AMP world</title>
    <link rel="canonical" href="https://www.radiantmediaplayer.com/docs/latest/amp-iframe.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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 custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  </head>
  <body>
  <amp-iframe sandbox="allow-scripts allow-same-origin allow-popups allow-presentation" width="640" height="360" layout="responsive" allowfullscreen frameborder="0" src="https://www.rmp-streaming.com/iframe/iframe-content-amp.html">
    <amp-img layout="fill" src="https://www.radiantmediaplayer.com/images/poster-rmp-demo.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.

In order for Google Cast to work from a sandbox iframe you need to add the allow-presentation option to the iframe sandbox attribute.

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