Using Radiant Media Player in a web-based mobile application is currently in BETA and should not be considered for large scale production deployment. Feedback is welcome.
Using Radiant Media Player in a WebView or in a Cordova-based application is only available for PLATFORM edition customers.
You can use Radiant Media Player to build media-oriented web-based mobile applications on Android and iOS. The player is equipped with various optimisations, notably file:// protocol support, to work in the following environments:
Radiant Media Player can be used to build web-based mobile applications for the following mobile OS:
It is possible that Radiant Media Player used in web-based mobile applications would work on previous versions of Android or iOS but they are not officially supported.
All player features available for the mobile web are generally available with Radiant Media Player for web-based mobile applications. Below is a non-exhaustive list of features you can expect to be available or not when using Radiant Media Player in a web-based mobile application:
| Feature | Android | iOS |
|---|---|---|
| HLS (Clear or AES-128/SAMPLE-AES) | ||
| DASH (Clear or Widevine DRM) | ||
| Progressive download | ||
| HTML5 video ads (1) | ||
| VOD & Live streaming | ||
| DVR streaming | (2) | |
| 360 video | (3) | |
| Autoplay (with audio) support (4) | ||
| Mobile-first & responsive UI | ||
| Player API | ||
| Google Cast (5) | ||
| Offline mode (6) |
While it is technically possible to use Radiant Media Player cloud player in a web-based mobile application we recommend using the self-hosted player files wherever possible in WebView or Cordova-based applications. This does not apply to standalone web applications.
A WebView is a view generated by native code on Android or iOS that displays web pages. When embedded in a WebView the player assumes the file:// protocol is used and opts
for various optimisation to better fit this environment. In such cases the player adds the rmp-webview class to its container (HTML element with the
rmp-container class). You can also query the player API
isWebView method which should return a boolean clearly stating if the player is currently used in a WebView or not.
You can find information on how to get started with a Cordova-based application here. Cordova is widely used for building web-based mobile applications and works as the basis for many popular frameworks and tools like Ionic or PhoneGap. Essentially Cordova uses WebViews to display web-based content in a mobile application while providing a complete set of APIs to access native functionalities like camera, contacts ...
Specifically we support Cordova 6+ for building mobile applications on Android 5+ and iOS 10+.
In order to use Radiant Media Player with Cordova it is expected that you are familiar with Cordova concepts and general web development best practices. Radiant Media Player scope of support is limited to insuring that the player works properly in a Cordova-based environment, we cannot provide assistance with installing, using or developing applications with Cordova.
A Cordova project generally has a file structure similar to:
Here we will take a closer look at the www/ folder. This folder holds our web-based assets (JavaScript, CSS, images ...) required to build our application.
In a basic example the www/ folder can have the following structure:
In order to use Radiant Media Player in a Cordova-based application we recommend adding a folder named rmp/ at the root of the www/ directory. This rmp/ folder will hold the self-hosted player files. Example of rmp/ folder file structure:
Folders like examples/ and flash/ that are part of the self-hosted player files package are not necessary in web-based mobile applications and can be safely excluded.
In the www/ folder from our basic example above we have an index.html file. For the purpose of our example we will be showing a code example using the Bootstrap 3 CSS framework. This index.html file can look like:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
style-src * http: https: 'unsafe-inline';
script-src * http: https:;
connect-src * http: https:;
font-src * http: https:;
img-src * http: https: android-webview-video-poster: data:;
media-src * blob: http: https:">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello RMP and Cordova</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>RMP in Apache Cordova</h1>
<p>Some content before our player</p>
<div id="rmpPlayer"></div>
<p>Some content after our player</p>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="rmp/js/rmp.min.js"><</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Let us review the important sections of the above file:
Well-formed HTML document: this file uses a valid DOCTYPE and HTML file structure with a <html>, <head> and <body> sections.
Content security policy (CSP): for more information on CSP you can review this MDN article and this Cordova documentation article. CSP is an important part of successfully using Radiant Media Player in a Cordova-based application so make sure to take some time to fully understand this concept if you are not already familiar with it. Having a rich media player, especially if you want to use video ads, in a Cordova-based application requires a somewhat loose CSP configuration in order to fetch media content and VAST resources. Especially note the following CSP set up above:
style-src * http: https: 'unsafe-inline'; script-src * http: https:; connect-src * http: https:; font-src * http: https:; img-src * http: https: android-webview-video-poster: data:; media-src * blob: http: https:
It is possible to use a stricter CSP configuration but note that this may disrupt the loading of media content or video ads (flexible media-src, img-src, connect-src are notably important). You should want to experiment to see what is the best CSP configuration for your project.
After our CSP meta tag we have various Cordova-specific meta tags which you can find documentation for in Cordova documentation.
Then we find our CSS files and HTML layout.
At the bottom of our file we find JavaScript files:
cordova.js which is required to build applications with Cordovarmp/js/rmp.min.js which is Radiant Media Player main JavaScript libraryjs/index.js which holds our sample application JavaScript logicWe will now review the content of the js/index.js file and how we can initialize Radiant Media Player for our web-based mobile application:
var app = {
// Application Constructor
initialize: function () {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function () {
this.setUpPlayer('rmpPlayer');
},
// set up player onDeviceReady
setUpPlayer: function (id) {
var bitrates = {
hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
var settings = {
licenseKey: 'your-license-key',
bitrates: bitrates,
delayToFade: 3000,
width: 640,
height: 360,
// we tell the player where to find the self-hosted files
pathToRmpFiles: './rmp/',
poster: 'img/poster-rmp-showcase.jpg'
};
var rmp = new RadiantMP(id);
rmp.init(settings);
}
};
app.initialize();
You can now try to deploy your application on a test device (example: cordova run android) and see the results on an actual device.
Most other player settings available for "classic" mobile browser usage are also available for use in a Cordova-based application.
Properly displaying non-linear VAST ads in a Cordova-based application with Radiant Media Player currently requires to install the cordova-plugin-inappbrowser for proper touch on ads handling.
A standalone web application is designed to look and behave in a way similar to a native application - for example, it is scaled to fit the entire screen of a device. You can tailor your web application for Safari on iOS or Chrome for Android even further, by making it appear like a native application when the user adds it to the "Home screen".
When embedded in a standalone web application the player adds the rmp-standalone class to its container (HTML element with the
rmp-container class). You can also query the player API isStandalone method which should return a boolean clearly stating if the player is currently used in a standalone web-app or not.
Apple has documentation on how to configure standalone web applications. Notable this is achieved by adding the following meta tag to your HTML page:
<meta name="apple-mobile-web-app-capable" content="yes">
For Chrome on Android Google has a guide for Installable Web Apps with the Web App Manifest. This approach follows the W3C Web App Manifest specification which is also available in Firefox and Opera.