Radiant Media Player

Working with Adobe PhoneGap



Get started with Adobe PhoneGap

Adobe PhoneGap is a platform built on top of Apache Cordova to create and cloud-package web-based mobile applications. It provides both free and paid tools to make mobile application development easier and faster.

In this article we will review how to best use Radiant Media Player when creating a PhoneGap-based mobile application. Because PhoneGap is based on Cordova you may also want to read our working with Cordova guide for further insight.


Scope of support

We support the following environments for using Radiant Media Player with Adobe PhoneGap:

  • phonegap-cli 6+
  • Android 5+
  • iOS 9+

Installing PhoneGap and creating a new project

First we need to install phonegap-cli.

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

phonegap create rmpsampleapp --id "com.radiantmediaplayer.rmpsampleapp" --name "RmpSampleApp"

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

Now we will review how to use the PhoneGap Developer app for Android and/or iOS with Radiant Media Player.

Installing and updating Adobe PhoneGap 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 Adobe PhoneGap set-up.


Using the PhoneGap Developer app

The PhoneGap Developer app lets us test on the fly changes made to our application. As such you can use the following phonegap-cli command to start a small web server:

phonegap serve

Then you can connect to this server from the PhoneGap Developer app for Android or iOS and review your application changes live.

However the PhoneGap Developer app has some inherent limitations to be aware of. Indeed in order to allow previewing on-the-fly changes this testing app has a specific set of configuration which may limit generally available features especially when dealing with media content:

  • The PhoneGap Developer app rewrites the Content Security Policy as such we need a loose CSP configuration
  • You will need to use self-hosting of the player files to avoid layout issues in relation to CSP overwriting
  • Outgoing links (like in video ads or logo) may not be clickable
  • On iOS the player may not play inline but only in fullscreen

It is important to note that those issues are not present when compiling your application but only when viewing it through the PhoneGap Developer app. Hence while it may be convenient to use the PhoneGap Developer app, always compile your application for serious testing. This can be done with the following command line:

phonegap cordova run android

You can also use the Adobe PhoneGap Build service to compile your application. Another way around the PhoneGap Developer app limitations is to build your own custom PhoneGap Developer App


Developing our application

Earlier we created our RmpSampleApp application. The rmpsampleapp/ folder should look like:

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

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/
  • res/
  • rmp/
  • spec/
  • index.html
  • spec.html

The spec* file and folder are used for testing (Jasmine-based) our application. In this example we use Radiant Media Player self-hosted player files so we created and put those files in the rmp/ folder.

We will now modify the files within the www/ folder to properly run Radiant Media Player in our mobile 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 * 'unsafe-inline'; 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 PhoneGap</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="rmp/js/rmp.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

You can refer to our working with Cordova guide for more information about the above setup.

At the bottom of our index.html file we find the following JavaScript files:

  • cordova.js which is required to build applications with Cordova
  • rmp/js/rmp.min.js our self-hosted core player library
  • js/index.js with 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,
      // we tell the player where to look for the self-hosted player dependencies
      pathToRmpFiles: 'rmp/',
      // 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();

We can now preview our application in the PhoneGap Developer app or compile it for rendering on an Android or iOS device.


References

You can review the guides in this section for additional information on PhoneGap-specific tooling.


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.