Radiant Media Player

Web-based mobile applications support



Web-based mobile applications documentation sections


Scope of support for building web-based mobile applications with Radiant Media Player

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:

  • WebViews created from native code
  • Applications built on top of Apache Cordova: this includes support for frameworks and tools like Ionic or PhoneGap.
  • Standalone web applications

Supported OS

Radiant Media Player can be used to build web-based mobile applications for the following mobile OS:

  • Android 5+
  • iOS 10+

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.


Supported features

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)
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)
  • (1) video ads in web-based mobile applications are rendered through rmp-vast. Displaying ads through the IMA SDK in web-based mobile applications is not available as this falls outside the scope of support of the HTML5 IMA SDK.
  • (2) on iOS DVR streams are presented as simple live streams
  • (3) support for 360 video in iOS is not currently available - a non-360 fallback stream can be provided
  • (4) autoplay (with audio) is available in WebView and Cordova-based applications. In standalone mode only muted autoplay is supported.
  • (5) Google Cast is only available in standalone web applications or in Chrome for Android
  • (6) currently the player requires an Internet connection to display media content

Recommended self-hosting of player files

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.


Using Radiant Media Player in a WebView

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.


Using Radiant Media Player in a Cordova-based application

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.


Cordova project structure

A Cordova project generally has a file structure similar to:

  • hooks/
  • platforms/
  • plugins/
  • www/
  • config.xml

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:

  • css/
  • img/
  • js/
  • index.html

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:

  • css/
  • dash/
  • hls/
  • js/
  • media/
  • rmp-vast/
  • three/
  • vtt/

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.


Code example for using Radiant Media Player in a Cordova-based application

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 Cordova
  • rmp/js/rmp.min.js which is Radiant Media Player main JavaScript library
  • js/index.js which holds our sample application JavaScript logic

We 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.


Using Radiant Media Player in a standalone web application

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.


iOS

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">

Android

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.

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