Working With Angular

Get started with Angular

Angular is a popular JavaScript framework to build modern single-page web application.

Radiant Media Player can easily be used in an Angular app - in this guide we will review how.

Scope of support

We support the following environment for using Radiant Media Player with Angular framework:

• Angular CLI 12+

While it is very possible that Radiant Media Player would work with previous versions of Angular, those versions have not been tested by us.

To follow this guide you will need to use self-hosting of 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 Angular app, this approach is not covered in this guide and not officially supported by us.

Creating our sample Angular app

First you will need to install Angular:

npm install -g @angular/cli

Then we will create a blank app called "player":

ng new player

Checking our app before installing Radiant Media Player:

cd player
ng serve --open

Verify that you can see the Angular demo app before proceeding to next section.

Installing Radiant Media Player in an Angular app

Since we are using self-hosting of player files, first we need to add Radiant Media Player files under src > assets > radiantmediaplayer in your Angular project (create the radiantmediaplayer folder and put the content of the self-hosted package in this folder).

Then we need to add Radiant Media Player as a library to the runtime global scope. Open the angular.json file at the root of your Angular project and reference Radiant Media Player JavaScript library under the "scripts" array (under projects > app > architect > build > options):

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

Radiant Media Player is now part of our Angular app and new instances of the player can be created anywhere in our application.

Defining typings

Angular compiler, that uses TypeScript, is however going to ask for typings for Radiant Media player library. The rmp.min.d.ts file, located in the self-hosted package, should automatically be identified by the Angular project to add types support for Radiant Media Player.

If you are using another specific approach for typings, you can also create a src/typings.d.ts file and copy & paste the content of the rmp.min.d.ts file inside src/typings.d.ts. This will add types support for Radiant Media Player in your Angular project as well.

Configuring the player

We will now be adding and configuring the player in our Angular app. Let us open the src > app > app.component.html file and add our player container where we want it to stand:

<div class="content" role="main">
...
  <div id="rmp"></div>
...
</div>

Once this is done we can configure our player in src > app > app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'blank';

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

We can now test our updated application in a browser:

ng serve --open

You should now see Radiant Media Player in the demo Angular app now.

More information on using 3rd-party library in Angular can be found here.