Google Cast from Radiant Media Player used in a Cordova-based mobile app is available for the following emitting platforms:
Our implementation is based on a Cordova plugin: cordova-plugin-chromecast. While this implementation of Google Cast is not as comprenhensive as our default Google Cast implementation for Google Chrome on desktop and mobile, it should cover most, if not all, requirements for a top-notch Google Cast experience from a Cordova-based mobile application for Android or iOS.
First make sure to review our working with Cordova guide to familiarize yourself with using Radiant Media Player in a Cordova-based mobile app.
Adding the required cordova-plugin-chromecast plugin can be done through the command line:
cordova plugin add https://github.com/jellyfin/cordova-plugin-chromecast.git
Given the specific context of a Cordova mobile app, Radiant Media Player will not automatically load the required Google Cast JavaScript library when initialized. We need to add that file just before the JavaScript player file.
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> <script src="rmp/dist/rmp.min.js"></script>
googleCastCordova: Boolean
Enables Google Cast support in a Cordova-based mobile
application. Note that googleCast setting must also be set to true.
Default: false.
googleCastCordovaDebug: Boolean
Enables debug mode for Google Cast support in a Cordova-based mobile application. This allows for the use of Google Cast for Cordova in Chrome for desktop or Chrome for Android for easier debugging. Default: false.
Other settings available for
Google Cast support in Google Chrome for desktop
and mobile can also be used, including: googleCastReceiverAppId,
googleCastAdTagUrl, googleCastVmapAdsRequest
When casting is engaged two players exist at the same time: the remote player which lives in the receiver application and the local player which lives in the sender application. When a media is successfully cast from the sender application to the receiver application the local player is paused and its UI controls the remote player. The player API can be used to control the remote player when casting is engaged.
Supported player API events include
playpausetimeupdatecastmedialoaded: media has been successfully loaded on receiving device
castmediaunloaded: media has been successfully unloaded on receiving
device and playback may continue on the sendercastmediaerror: media could not be loaded on receiving device - current
casting session endscastapiavailable: the Google Cast API has been successfully loaded and
is
now available. The global
Google Cast related variables can now be accessed including
window.chrome.cast and
window.cast.framework
Supported player API methods include
playpausestoppausedvolumemuteseekTocurrentTimedurationsetSrcdestroycastUrl: returns a String representing the currently
cast URL.castMediaLoaded: returns a Boolean stating if a media
is
loaded on the receiving application.castConnected: returns a Boolean stating if the remote
player
is currently connected to the sender application. Note that in some instances (like
when a media ends on the receiving application) the remote player can be connected to
the sender application but with no media loaded within it.www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="default-src * blob: http: https: file: data: android-webview-video-poster: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval';">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello RMP and Google Cast for Cordova</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>RMP with Google Cast in Cordova</h1>
<p>Some content before our player ...</p>
<div id="rmp"></div>
<br><br>
<p>... some content after our player</p>
</div>
</div>
</div>
<script src="cordova.js"></script>
<-- First we include Google Cast JavaScript library -->
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<-- Then we include Radiant Media Player JavaScript library -->
<script src="rmp/dist/rmp.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
www/js/index.js
const app = {
// Application Constructor
initialize: function () {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function () {
this.setUpPlayer('rmp');
},
// set up player onDeviceReady
setUpPlayer: function (id) {
const src = {
hls: 'https://your-hls-url.m3u8'
};
const settings = {
licenseKey: 'your-license-key',
src,
width: 640,
height: 360,
// we tell the player where to look for the self-hosted player files
pathToRmpFiles: 'rmp/',
// we enable Google Cast for Cordova support
googleCast: true,
googleCastCordova: true,
contentMetadata: {
poster: [
'https://your-poster-url.jpg'
]
}
};
const rmp = new RadiantMP(id);
// Initialization ... and done!
async function initRmpPlayer() {
try {
await rmp.init(settings);
} catch(error) {
console.error('Radiant Media Player failed to initialize', error);
}
}
initRmpPlayer();
}
};
app.initialize();
©2015-2025 Radiant Media Player. All Rights Reserved. ✝