Radiant Media Player

Working with Ionic framework



Working with Ionic framework documentation sections


Get started with Ionic framework

Ionic framework provides tools and services for developing native and progressive web apps with ease using web technologies like JavaScript, CSS, HTML5 and Sass.

It is based on Apache Cordova and Angular. Radiant Media Player can be used in with any Cordova-based framework and as such we support using Radiant Media Player with Ionic framework. You may want to take on our working with Cordova guide for more information on how to use Radiant Media Player in a Cordova-based application.

Using Radiant Media Player with Ionic framework requires a PLATFORM Edition license key.


Scope of support

We support the following environments for using Radiant Media Player with Ionic framework:

  • Ionic framework 3+
  • Android 5+
  • iOS 9+
  • Radiant Media Player 4.4.24+ - ideally use the latest version available

Installing Ionic framework

In this guide we will review how to add Radiant Media Player to a simple Ionic Framework based application.

We can start with Ionic Framework get started and install it along with cordova. This command line will install the latest available version for each component:

npm install -g cordova ionic

After that we will start a simple application using the Ionic Framework "tabs" template:

ionic start myApp tabs

We can test our "tabs" application in our favorite browser

cd myApp
ionic serve

This mode can help us to kick start our development before testing and deploying on an actual device.

This guide is not a comprehensive guide on how to build a media-oriented mobile application with Ionic Framework - it is just intended to lay some common grounds to make sure Radiant Media Player can be used in such an application.


Developing our application

Now that we are all set we can start exploring our "tabs" application. In our myApp directory we should have something that looks like:

  • hooks/
  • node_modules/
  • platforms/
  • plugins/
  • resources/
  • src/
  • www/
  • config.xml
  • ionic.config.json
  • package.json
  • tsconfig.json
  • tslint.json

We should also have some git related files/folders and a README.md.

In order to add Radiant Media Player to our "tabs" application we will work in the src/ folder. This folder should look like:

  • app/
  • assets/
  • pages/
  • theme/
  • index.html
  • manifest.json
  • service-worker.js

First we will open the index.html file to add Radiant Media Player JavaScript library:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  <script src="cordova.js"></script>
  <link href="build/main.css" rel="stylesheet">
  // Here we add Radiant Media Player JavaScript library
  // In this example we used our cloud player but you can also self-host player files within your app
  <script type="text/javascript" src="https://cdn.radiantmediatechs.com/rmp/4.5.8/js/rmp.min.js" 
    integrity="sha384-N8iccZx4+o/JQEudKK8sDITl0HDIppkYGCW9hAuTu8vIfjfUKAY6Hi20rDh5Q22g"
    crossorigin="anonymous"></script>
</head>

<body>
  <ion-app></ion-app>
  <script src="build/polyfills.js"></script>
  <script src="build/vendor.js"></script>
  <script src="build/main.js"></script>
</body>
</html>

Now we will head towards the pages/home/ folder in which we should find:

  • home.html
  • home.scss
  • home.ts

In home.html we will add our player container:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to RMP + Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI. It also holds a super cool 
    video displayed with Radiant Media Player on its home page.
  </p>
  // Here comes our player container
  <div id="rmpPlayer"></div>
</ion-content>

In home.ts we will add our player logic:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

// We need to decalre our global RadiantMP constructor 
declare const RadiantMP: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  elementID: string = 'rmpPlayer';
  rmp: any = null;

  constructor(public navCtrl: NavController) {

  }

  // When home page comes into view we play our player
  ionViewDidEnter() {
    if (this.rmp && this.rmp.getReady()) {
      this.rmp.play(); 
    }
  }

  // When we leave home page for another page we pause our player
  ionViewWillLeave() {
    if (this.rmp && this.rmp.getReady()) {
      this.rmp.pause();
    }
  }

  // When home page initially loads we configure and init our player
  ionViewDidLoad() { 
    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,
      debugLevel: 2,
      skin: 's1',
      autoplay: true,
      // Yes we can play ads if we want to (with rmp-vast)
      //ads: true,
      //adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml',
      poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
    };
    this.rmp = new RadiantMP(this.elementID);
    this.rmp.init(settings);


    // handle "tabs" in fullscreen mode
    var rmpContainer = document.getElementById(this.elementID);
    var FW = this.rmp.getFramework();
    var bottomTabBar;
    rmpContainer.addEventListener('enterfullscreen', function () {
      if (!bottomTabBar) {
        bottomTabBar = <HTMLElement>document.querySelector('.tabbar.show-tabbar');
      }
      FW.addClass(bottomTabBar, 'rmp-no-display');
    });
    rmpContainer.addEventListener('exitfullscreen', function () {
      if (!bottomTabBar) {
        bottomTabBar = <HTMLElement>document.querySelector('.tabbar.show-tabbar');
      }
      FW.removeClass(bottomTabBar, 'rmp-no-display');
    });
  }

}

You can download a src folder example here.


Testing and deploying

Now that our app includes our player we can start testing it. We can use ionic serve to live develop and test our application in a desktop browser.

To test on a device we will need some Android and iOS specific tools. Follow this Ionic Framework guide to install the requirements for testing and deploying your application.

Then for Android we can use ionic cordova run android --device to test our application on an actual Android device.

For iOS we can use ionic cordova run ios --device.


Deploying to iOS specific considerations

We assume you have followed the above Ionic Framework guide for deploying on iOS and that you are all set. Additionally you will need to tune the following:

  • You need to configure your Ionic application to play media content inline for the player to work as expected. This can be achieved by adding <preference name="AllowInlineMediaPlayback" value="true" /> to your config.xml file.
  • By default when an iOS device is in silent mode (the little switch above the side volume buttons) HTML5 media content is played without sound. This cordova plugin allows to work around this issue.

As a conclusion

Ionic offers a wealth of features and services for building professional-level mobile applications. It is widely used by the mobile developer community and the near-native experience it provides is acknowledged by many in the industry. Learn more here or on GitHub.

By making sure Radiant Media Player works within an Ionic-based application we hope you can build amazing media-oriented mobile applications without the complexity and the cost of using native SDK.

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