Working With Ionic

Get started with Ionic

Ionic is the mobile SDK for the Web. An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in Angular, Reach, Vue or vanilla JavaScript.

Radiant Media Player can be used to build video-oriented mobile apps for Android and iOS with Ionic and Capacitor. We also have guides for using our player with Angular, React and Vue frameworks.

Note that this guide is not a comprehensive guide on how to use Ionic - it is just intended as a baseline example on how to add Radiant Media Player to an Ionic project.

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

Scope of support

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

• Ionic CLI 7+
• Ionic Framework 7+
• Capacitor 6+
• Android 6+ (Android WebView 60+)
• iOS 13+ (WKWebView)
• iPadOS 13+ (WKWebView)

When using Radiant Media Player in an Ionic application we recommend using self-hosted player files for better performance in production. Active customers can download the self-hosted package in our back-end. For testing purposes and trial users our cloud player can also be used.

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. The process is the same for an iOS app. See the following guides for:

• Android development with Capacitor
• iOS development with Capacitor

First, we start with installing Ionic CLI:

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 for our Ionic project through Capacitor (see here for iOS):

npm install @capacitor/android

npx cap add android

We can now build our application with ionic

ionic build

And test on our device/emulator:

npx cap run android

You can also open the project directly in Android studio with:

npx cap open android

Developing our application

Now that we are all set we can start adding Radiant Media Player to our Ionic app. In myApp folder we should have a structure that looks like:

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

To add Radiant Media Player to our 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. We put those files under the src > assets > radiantmediaplayer folder (this folder was not created by Ionic - you will need to create it and put the self-hosted player files inside).

Then, let us add Radiant Media Player library to our Ionic with Angular project. Specifically, we need to add Radiant Media Player as a library to the runtime global scope.

Open the angular.json file at the root of the project and reference Radiant Media Player JavaScript library under the "scripts" array - projects > app > architect > build > options:

"scripts": [
  "src/assets/radiantmediaplayer/dist/rmp.min.js"
]

Radiant Media Player is now part of our Ionic with Angular app and new instances of the player can be created anywhere in our application. More information for using Radiant Media Player with Angular can be found in our dedicated guide.

If you are a trial user or want to use Radiant Media Player cloud player in your app, you can do the following: add Radiant Media Player cloud player in the src > index.html file at the root of your Ionic with Angular project.

<script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.js"></script>

If you are using our cloud player you will also have to add the Radiant Media Player type file to enable TypeScript support (you can add it in the src > assets folder for example).

Now we will add our player container to the HTML layout of our app. We open the src/app/home/home.page.html file and add our player container:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      RMP + Ionic
    </ion-title>
  </ion-toolbar>
</ion-header>

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

  <div id="container">
    <strong>Hello Radiant Media Player and Ionic</strong>
    <!-- add player container -->
    <div id="rmp"></div>
  </div>
</ion-content>

We now open src/app/home/home.page.ts and add our player configuration:

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,
      width: 640,
      height: 360,
      // You can turn off this feature if you do not want automatic fullscreen on landscape rotate
      automaticFullscreenOnLandscape: true,
      pathToRmpFiles: '../../assets/radiantmediaplayer/'
    };
    const rmp = new RadiantMP('rmp');
    async function initRmpPlayer() {
      try {
        await rmp.init(settings);
      } catch (error) {
        console.error('Radiant Media Player failed to initialize', error);
      }
    }
    initRmpPlayer();
  }
}

We will also center our player container in the view, so we open src/app/home/home.page.scss, and add the following CSS:

#rmp {
  margin: auto;
}

We are all set now. We can test and deploy our app.

Testing and deploying

We can use ionic serve to live develop and test our application in a desktop browser.

To test on an actual Android device with Capacitor we can run:

ionic build

Then:

npx cap run android

Or open our project with Android Studio with npx cap open android and start building/debugging from Android Studio.

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

Video advertisement specific considerations

We do support displaying VAST video advertisement in an Android, iOS or iPadOS mobile app built with Ionic. It should be noted that since the HTML5 Google IMA SDK is not officially supported in an iOS or Android WebView, the preferred solution is to use our VAST parser rmp-vast. See this section for more information on limitations when using the Google IMA HTML5 SDK in a WebView mobile app. The VAST parser can be selected with player setting adParser set to 'rmp-vast' (or 'ima' but not recommended).

DRM specific considerations

It is perfectly possible to play DRM encrypted content in a WebView managed by Ionic.

For Android the Widevine CDM needed to playback encrypted content is present in the Android System WebView.

Playback of DRM content on Android however requires a secure context, otherwise the player will throw a 308 error. You can inspect the WebView of your Ionic project with Chrome dev tools when running on an actual Android device. Then you can run in the console:

window.origin

It should return something like https://localhost. If it returns an IP address or a non-HTTPS URI then you need to adjust your project to run in a secure context. More information on the subject can be found here.

Widevine DRM content generally does NOT playback on Android emulators - test on an actual device to make sure your DRM content can play as expected.