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.
We support the following environments for using Radiant Media Player with Ionic framework:
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.
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
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:
In order to add Radiant Media Player to our "blank" application we will work in the src/
folder. This folder should look like:
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.
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, 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); } }
Additionally for iOS, you will need to tune the following:
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)
<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-2022 Radiant Media Player. All Rights Reserved.