Working With Ionic

Get started with Ionic

Ionic 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, Vue or vanilla JavaScript with Radiant Media Player. If you are using Angular you may want to review our working with Angular guide. If you are using React you may want to review our working with React guide. If you are using Vue you may want to review our working with Vue guide.

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 6+
• Capacitor CLI 3+
• Android 5+
• iOS 12+ (WKWebView)
• iPadOS 13+ (WKWebView)

When using Radiant Media Player in an Ionic application you need to use the self-hosted player files. Active customers can download the self-hosted package in our back-end. Trial users can contact us to obtain this package.

While it is technically possible to use our cloud-player within an Ionic app, this approach is not covered in this guide and not officially supported by us.

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 "blank" template:

ionic start myApp blank

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

cd myApp
ionic serve

We can now add support for Android and iOS platforms:

ionic capacitor add ios

ionic capacitor add android

Developing our application

Now that we are all set we can start exploring our "blank" application. In our myApp directory we should have a file/folder structure that looks like:

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

In order to add Radiant Media Player to our "blank" 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

In this example we use Radiant Media Player self-hosted player files. For the purpose of this guide those files were put under the src > assets > radiantmediaplayer/ folder (this folder was not created by Ionic).

Now we will add our player container. We open src/app/home/home.page.html and add our player container:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <!-- add player container -->
    <div id="rmp"></div>
  </div>
</ion-content>

Then we open src/app/home/home.page.ts and add our player code:

Make sure to include Radiant Media Player as a library to the runtime global scope for Angular to properly identify it.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
          
  constructor() {}

  ngOnInit() { 
    const src = {
      hls: 'your-hls-url'
    };
    const settings = { 
      licenseKey: 'your-license-key',
      src: src,
      width: 320,
      height: 180,
      pathToRmpFiles: '../../assets/radiantmediaplayer/'
    };
    const rmp = new RadiantMP('rmp');
    rmp.init(settings);
  }
}

We can now test and deploy our app.

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.

Android fullscreen video

On Android, by default, when the player is going fullscreen the system UI/status bar will remain visible.

It is however possible to hide those elements based on the state of the player. You can also follow instructions at Android Full Screen Ionic docs. Find more information on Android immersive mode on Android docs.

First install the required plugin:

ionic cordova plugin add cordova-plugin-fullscreen
npm install @ionic-native/android-full-screen

Then add your code based on player fullscreen state. Do not forget to add AndroidFullScreen in providers in your *.module.ts file for Angular.

import { Component, OnInit } from '@angular/core';
import { AndroidFullScreen } from '@ionic-native/android-full-screen/ngx';
          
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {
          
  constructor(private androidFullScreen: AndroidFullScreen) {}
          
  ngOnInit() {
    const settings = {
      licenseKey: 'your-license-key',
      src: {
        hls: 'your-hls-url'
      }
    };
    const elementID = 'rmp';
    const rmp = new RadiantMP(elementID);
    // Fullscreen state handling happens here
    const container = document.getElementById(elementID);
    container.addEventListener('enterfullscreen', () => {
      this.androidFullScreen.isImmersiveModeSupported().
        then(() => this.androidFullScreen.immersiveMode()).
        catch((error: any) => console.log(error));
    });
    container.addEventListener('exitfullscreen', () => {
      this.androidFullScreen.isImmersiveModeSupported().
        then(() => this.androidFullScreen.showSystemUI()).
        catch((error: any) => console.log(error));
    });
    // Init after player events are wired
    rmp.init(settings);
  }
}

Deploying to iOS specific considerations

Additionally for iOS, you will need to tune the following:

• Set adForceNativeFullscreenOnIosForAds to true to avoid layout issue with tabs UI (you will loose skippable video ads that are only supported on iOS when adForceNativeFullscreenOnIosForAds is set to false)
• 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.