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 20+

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.

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 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 to the Angular project. The self-hosted package folder is named radiantmediaplayer-*.*.* where *.*.* is player version. In this example we have renamed that folder to radiantmediaplayer. We now add that folder in full to the public folder of our Angular project.

Then we need to add Radiant Media Player as a module to the Angular project. In the src folder we now create a player folder and we add player module files:

• rmp.min.d.mts
• rmp.min.mjs

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

Typings

Angular compiler, that uses TypeScript, should automatically recognise player types file rmp.min.d.mts.

Configuring the player

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

<div class="left-side">
  <h1>Hello, {{ title }}</h1>
  <div id="rmp"></div>
</div>

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

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import RadiantMP from '../player/rmp.min.mjs';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit {

  protected title = 'player';

  ngOnInit() {
    const src = {
      hls: 'https://your-hls-url.m3u8'
    };
    const settings = {
      licenseKey: 'your-license-key',
      src,
      width: 640,
      height: 360,
      pathToRmpFiles: '/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 can now test our updated application in a browser:

ng serve --open

You should now see Radiant Media Player in your Angular app now.