Radiant Media Player

Working with Apache Cordova



Get started with Apache Cordova

Apache Cordova is an open-source command-line solution that allows to build mobile applications with web technologies (HTML, CSS, JavaScript). It is used as the basis for many popular frameworks and services including Ionic and PhoneGap.

Cordova can also be used as is to build web-based mobile applications and we will review in this article how to use Radiant Media Player within a Cordova-based mobile application.


Scope of support

We support the following environments for using Radiant Media Player with Apache Cordova:

  • Apache Cordova 6+
  • Android 5+
  • iOS 9+

Installing Apache Cordova and other dependencies

In order to install Apache Cordova follow the instructions on its home page.

Once this is done we will create a new project as follows:

cordova create rmpsampleapp com.radiantmediaplayer.rmpsampleapp RmpSampleApp

This will create a Cordova project with a basic structure to help us get started. Our application name is RmpSampleApp and is located in folder rmpsampleapp/.

Now we will navigate to our application folder (rmpsampleapp/) and we will add platforms that we want to target for development our application:

cd rmpsampleapp
cordova platform add browser
cordova platform add android
cordova platform add ios

Here we add the browser, Android, and iOS platforms. To check your current set of platforms use:

cordova platform ls

To build and run an application on a specific platform, you will need to install SDKs for this platform. The browser platform which can conveniently be used for development does not require any platform SDKs. To check if you satisfy requirements for building on a specific platform use:

cordova requirements

You can review the following articles for information on building for Android or iOS: Android platform requirements and iOS platform requirements.

When our application is ready we can use an emulator to test our application. For example for Android:

cordova emulate android

or we can compile and transfer our application on a real device. For example for Android:

cordova build android

But before we do that we will need to develop our application and add Radiant Media Player to it. There are many other options with Apache Cordova, including various plugins designed to fit features available in native applications. It is not the purpose of this guide to cover a comprehensive tour of Apache Cordova but rather we would like to provide enough information to easily implement Radiant Media Player in a Cordova-based mobile application.

Installing and updating Apache Cordova and its dependencies in order to build a mobile application may require advanced tuning based on your development and target platforms. Radiant Media Player support team cannot help with installing or troubleshooting Apache Cordova set-up.


Developing our application

When we ran the cordova create rmpsampleapp com.radiantmediaplayer.sampleapp RmpSampleApp command line we created a blank Cordova project. You can review the project structure in the rmpsampleapp/ folder.

This should look like:

  • hooks/
  • platforms/
  • plugins/
  • res/
  • www/
  • config.xml
  • package.json

Now we will take a closer look at the www/ folder which holds our web-application to be rendered in a native mobile application. It has generic folders that we can find in any modern web project:

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

We will now modify the files within the www/ folder to add Radiant Media Player to our project.

In this example we use Radiant Media Player cloud-hosted player files but you can also use self-hosting to keep the player files within your application.

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="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; 
    style-src * http: https:;
    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:" />
  <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>
        <br><br>
        <p>... some content after our player</p>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="https://cdn.radiantmediatechs.com/rmp/4.4.4/js/rmp.min.js" 
    integrity="sha384-KfgOHL+uRs3rPCnZledCYzAuPc3+eu4j6DQzjQH8370JtLm2QhZzZSlZ4r9OfCtK"
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Let us review the good parts of this index.html file:

Well-formed HTML document: this file uses a valid HTML5 DOCTYPE and HTML file structure with <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. CSP requirements to use Radiant Media Player are as follows. You may find a stricter CSP configuration that works for your use-case but keep in mind that media-oriented applications often need to fetch content and resources hosted from different Internet locations.

default-src 'self' data: gap: https://ssl.gstatic.com; 
style-src * http: https:;
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:

Around 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, in this example we use the Bootstrap CSS framework.

www/css/index.css

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

The HTML layout for our application is very basic and should speak for itself. We can find our player container with id rmpPlayer. At the bottom of our file we find JavaScript files:

  • cordova.js which is required to build applications with Cordova
  • https://cdn.radiantmediatechs.com/rmp/4.4.4/js/rmp.min.js Cloud-hosted Radiant Media Player
  • js/index.js which our logic to start the application and the player

www/js/index.js

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,
      // if we need ads
      // ads: true,
      // adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml',
      // if we need autoplay - full autoplay (e.g. with sound) is supported in web-based mobile apps
      // autoplay: true,
      poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
    };
    var rmp = new RadiantMP(id);
    rmp.init(settings);
  }
};
app.initialize();

Once we have our files ready we can run:

cordova run browser

The above will let us see how our application renders in our system default browser. Then we can do:

cordova run android

And the application will be compiled and transfered to our test Android device. With proper configuration we can do the same for iOS.


Debugging

You can review the Debugging Cordova apps article to understand how to debug Cordova-based applications. More generally the Best Practices Cordova app development is a must read before doing any serious Cordova-based development.


Going further

You can review a non-exhaustive list of available features for Radiant Media Player in a web-based mobile application here. You can then browse our documentation to review how to enable those features in Radiant Media Player and start building your amazing Android and/or iOS mobile application.

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