Radiant Media Player

Working with Ionic framework



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

Radiant Media Player can be used in an Ionic app for Android or iOS, built with either Capacitor (Ionic's cross-platform native runtime for web apps) or Cordova. You can either use Angular, React or vanilla JavaScript with Radiant Media Player.

Note that this guide is not a comprehensive guide on how to build a media-oriented mobile application with Ionic - it is just intended to provide a simple example on how to add Radiant Media Player to a Ionic-based project.

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 CLI 6+
  • Ionic Framework 5+
  • Ionic Capacitor 2+ or Apache Cordova 9+
  • Android 5+
  • iOS 10+ (WKWebView)
  • iPadOS 13+ (WKWebView)

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

With the announcement of Apple in december 2019, to remove support for UIWebView API by end 2020, we only support WKWebView API for iOS apps built with Cordova or Capacitor. See this blog post to help you update to WKWebView API.


Installing Ionic

In this guide we will review how to add Radiant Media Player to a simple Ionic app for Android, while using Angular and Capacitor.

First, we start with installing Ionic. This command line will install the latest available version:

npm install -g @ionic/cli

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

ionic start myApp tabs

We can test our "tabs" application in a browser:

cd myApp
ionic serve

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:

  • android/
  • e2e/
  • node_modules/
  • src/
  • www/
  • angular.json
  • capacitor.config.json
  • ionic.config.json
  • karma.conf.js
  • package.json
  • tsconfig.json
  • tsconfig.app.json
  • tsconfig.spec.json
  • tslint.json

There could also be a few other files/folders.

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/
  • environments/
  • theme/
  • global.scss
  • index.html
  • main.ts
  • polyfills.ts
  • test.ts
  • zone-flags.ts

First we are going to 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 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">
<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  <base href="/" />
  <meta name="color-scheme" content="light dark" />
  <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/png" href="assets/icon/favicon.png" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <!-- add Radiant Media Player core library -->
  <script src="assets/rmp/js/rmp.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Now we will head towards the app/explore-container/ folder in which we should find:

  • explore-container.component.html
  • explore-container.component.scss
  • explore-container.component.ts
  • explore-container.component.spec.ts
  • explore-container.module.ts

In explore-container.component.scss we will overwrite #container default CSS to:

#container {
  text-align: left;
  position: relative;
  left: 0;
  top: 10px;
  margin-bottom: 40px;
  margin-left: 10px;
}

Then we will head towards the app/tab1/ folder in which we should find:

  • tab1-routing.module.ts
  • tab1.module.ts
  • tab1.page.html
  • tab1.page.scss
  • tab1.page.ts
  • tab1.page.spec.ts

In tab1.page.ts we will overwrite the default JavaScript to:

import { Component } from '@angular/core';

declare const RadiantMP: any;
          
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
          
export class Tab1Page {
          
  elementID: string = 'rmpPlayer';
  rmp: any = null;
          
  constructor() {}

  // When we enter Tab 1 page from another tab page we play our content
  ionViewDidEnter() {
    if (this.rmp && this.rmp.getReady()) {
      this.rmp.play(); 
    }
  }
  
  // When we leave Tab 1 page for another tab page we pause our content
  ionViewWillLeave() {
    if (this.rmp && this.rmp.getReady()) {
      this.rmp.pause();
    }
  }
          
  // When Tab 1 page initially loads we configure and init our player
  ngOnInit() { 
    var src = {
      hls: 'https://your-hls-url.m3u8'
    };
    var settings = { 
      licenseKey: 'your-license-key',
      src: src,
      width: 640,
      height: 360
    };
    this.rmp = new RadiantMP(this.elementID);
    this.rmp.init(settings);
  }
}

In tab1.page.scss we will add some CSS specific to the player:

.rmp-container {
  margin-left: 10px;
}

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 you will need Android and iOS specific tools. Follow this Ionic Android Development guide to install the required components to test and deploy on Android and this Ionic iOS Development guide for iOS/iPadOS.


Deploying to iOS specific considerations

Additionally for iOS, 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.

As a conclusion

Ionic offers a wealth of features and services for building professional-level mobile applications. It is widely used by mobile developers and the near-native experience it provides is acknowledged by many in the industry.

By making sure Radiant Media Player works with Ionic 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.