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.
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.
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 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.
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
Now that we are all set we can start exploring our "tabs" application. In our myApp directory we should have something that looks like:
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:
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:
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:
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 = 'rmp';
rmp: any = null;
constructor() {}
// When we enter Tab 1 page from another tab page we play our content
ionViewDidEnter() {
try {
this.rmp.play();
} catch(e) {
console.log(e);
}
}
// When we leave Tab 1 page for another tab page we pause our content
ionViewWillLeave() {
try {
this.rmp.pause();
} catch(e) {
console.log(e);
}
}
// When Tab 1 page initially loads we configure and init our player
ngOnInit() {
const src = {
hls: 'https://your-hls-url.m3u8'
};
const 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;
}
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.
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 } from '@angular/core';
import { AndroidFullScreen } from '@ionic-native/android-full-screen/ngx';
declare const RadiantMP: any;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
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 div = document.getElementById(elementID);
div.addEventListener('enterfullscreen', () => {
this.androidFullScreen.isImmersiveModeSupported().
then(() => this.androidFullScreen.immersiveMode()).
catch((error: any) => console.log(error));
});
div.addEventListener('exitfullscreen', () => {
this.androidFullScreen.isImmersiveModeSupported().
then(() => this.androidFullScreen.showSystemUI()).
catch((error: any) => console.log(error));
});
// Init after player events are wired
rmp.init(settings);
}
}
Additionally for iOS, 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 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.
©2015-2021 Radiant Media Player. All rights reserved.