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.
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, initial-scale=1, shrink-to-fit=no">
<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/9.15.19/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
// Set up player settings
const src = {
hls: 'https://your-hls-url.m3u8'
};
const settings = {
licenseKey: 'your-license-key',
// We use iframe mode
iframeMode: true,
sharing: true,
src: src,
contentMetadata: {
poster: [
'https://your-poster-url.jpg'
]
}
};
const rmp = new RadiantMP('rmp');
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, initial-scale=1, shrink-to-fit=no">
<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.
©2015-2024 Radiant Media Player. All Rights Reserved.