We support Google AMP markup with Radiant Media Player through amp-video-iframe. We will thus use iframe embedding mode with Radiant Media Player to get AMP-ready.
First we will set up a page for the content that will displayed through an amp-video-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/10.7.4/js/rmp.min.js"></script>
<script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js"></script>
<script>
// https://amp.dev/documentation/components/websites/amp-video-iframe#custom-integrations
(window.AmpVideoIframe = window.AmpVideoIframe || []).push(
onAmpIntegrationReady
);
function onAmpIntegrationReady(ampIntegration) {
// Set up player settings
const src = {
dash: 'https://your-dash-url/manifest.mpd'
};
const settings = {
licenseKey: 'your-license-key',
// Here are our iframe settings
iframeMode: true,
iframeAllowed: true,
autoplay: true,
sharing: true,
skin: 's1',
ads: true,
adTagUrl: 'https://your-ad-tag-url',
src,
contentMetadata: {
poster: [
'https://poster-url.jpg'
]
}
};
const rmp = new RadiantMP('rmp');
async function initRmpPlayer() {
try {
await rmp.init(settings);
} catch (error) {
console.error('Radiant Media Player failed to initialize', error);
}
}
// method(name, callback) Implements a method that calls playback functions on the video
ampIntegration.method('play', function () {
rmp.play();
});
ampIntegration.method('pause', function () {
rmp.pause();
});
ampIntegration.method('mute', function () {
rmp.mute = true;
});
ampIntegration.method('unmute', function () {
rmp.unmute = true;
});
ampIntegration.method('showcontrols', function () {
rmp.controls = true;
});
ampIntegration.method('hidecontrols', function () {
rmp.controls = false;
});
ampIntegration.method('fullscreenenter', function () {
rmp.setFullscreen(true);
});
ampIntegration.method('fullscreenexit', function () {
rmp.setFullscreen(false);
});
// postEvent(name) Posts a playback event to the frame
rmp.on('ready', function () {
ampIntegration.postEvent('canplay');
});
rmp.on('pause', function () {
ampIntegration.postEvent('pause');
});
rmp.on('playing', function () {
ampIntegration.postEvent('playing');
});
rmp.on('ended', function () {
ampIntegration.postEvent('ended');
});
rmp.on('volumechange', function () {
if (rmp.mute) {
ampIntegration.postEvent('muted');
} else {
ampIntegration.postEvent('unmuted');
}
});
rmp.on('adstarted', function () {
ampIntegration.postEvent('ad_start');
});
rmp.on('adcomplete', function () {
ampIntegration.postEvent('ad_end');
});
// getIntersection(callback)
let previousIntersectionRatio = 0;
setInterval(function () {
ampIntegration.getIntersection(function (intersection) {
if (intersection.intersectionRatio > 0.5) {
if (previousIntersectionRatio > 0.5 && rmp.paused) {
return;
}
rmp.play();
} else {
rmp.pause();
}
previousIntersectionRatio = intersection.intersectionRatio;
});
}, 2000);
/* https://amp.dev/documentation/components/amp-video-iframe#postanalyticsevent(eventtype[,-vars])
setInterval(function() {
// Post a custom analytics event every 3 seconds.
ampIntegration.postAnalyticsEvent('video-custom-foo', {
'myVar': Math.random().toString(),
});
}, 3000);
*/
initRmpPlayer();
}
</script>
<div id="rmp"></div>
</body>
</html>
This player code above can be viewed live here.
We now need to prepare our AMP layout for Radiant Media Player while using the amp-video-iframe component. We can check AMP validation here.
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Hello AMP world</title>
<link rel="canonical" href="https://canonical-url.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Include the `amp-video-iframe` extension script. -->
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
<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>
<div style="width: 80%;">
<amp-video-iframe id="myVideo"
src="https://iframe-url.html" width="16"
height="9" layout="responsive" implements-rotate-to-fullscreen autoplay
poster="https://poster-url.jpg">
</amp-video-iframe>
</div>
</body>
</html>
See it at work here.
©2015-2025 Radiant Media Player. All Rights Reserved.