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.
We support the following environments for using Radiant Media Player with Ionic framework:
When using Radiant Media Player in a production Ionic-based application we recommend using self-hosting of player files within the application for better performance. Active customers can download the self-hosted package in our back-end. Trial users can use the cloud player for testing or contact us to obtain the self-hosted package.
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.
Now that we are all set we can start exploring our "tabs" application. In our myApp directory we should have something that looks like:
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:
First we will open the index.html file to add Radiant Media Player JavaScript library:
In this example we use Radiant Media Player self-hosted player files. For the purpose of this guide those files were put under the assets/rmp/ folder (this folder was not created by Ionic). While it is also possible possible to use our cloud player it is generally best to host the player files within the application itself when going for production for best performance.
<!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"> <!-- If we want video ads we need to add rmp-vast now (to avoid issues with polyfills.js) --> <!-- <script type="text/javascript" src="assets/rmp/rmp-vast/rmp-vast.min.js"></script> --> <!-- Here we add Radiant Media Player JavaScript library --> <script type="text/javascript" src="assets/rmp/js/rmp.min.js"></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:
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,
width: 640,
height: 360,
autoplay: true,
pathToRmpFiles: 'assets/rmp/',
// 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.
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.
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:
<preference name="AllowInlineMediaPlayback" value="true" /> to your config.xml file.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.