Radiant Media Player

Working with Angular 4



Introduction

In this guide we will review how to add Radiant Media Player to an Angular 4 project through a basic Angular app example. This is not a comprehensive guide on how to use Radiant Media Player with Angular 4 but it rather provides indications on how to best get started.

In order to keep things familiar we have taken the Angular 4 Tour of Heroes tutorial and enrich it with Radiant Media Player so that each hero can have her/his own presentation video. Specifically we used the Angular 4 tutorial App after the Services section is completed.

While this guide focuses on Angular 4, it can also help for Angular 2 project.

Radiant Media Player in Angular 4 sample app

The sample app can be downloaded here. The live sample app can be viewed here.

Essentially this sample app allows the display of a video with the details of each hero. When a new hero is selected the player is appended or updated with this hero content. Additionally we have added a destroy button which allow to completely remove the player from the app.

Assuming you have Angular CLI installed you can just download our sample app, unzip it, use npm install to install the dependencies and then npm start to see it live in your browser.

Things you should know

  • Radiant Media Player main JavaScript library (rmp.min.js) is provided in ES5. We do code the player with ES2015 but the public releases for Radiant Media Player are ported to ES5 with Babel and we also use core-js/es6. Depending on how you load the player into your Angular project you need to take this into consideration as Angular 4 uses core-js and zone.js and this can cause conflict at run time. In our sample app we are loading rmp.min.js before the Angular polyfills in our index.html to workaround this potential conflict.
  • In the sample app we use Radiant Media Player self-hosted files (see assets/ folder) but you could also use the cloud player.
  • For the player to render properly we need to wrap our player in a container element. This can be viewed in src/app/app.component.html (div with rmpPlayerWrapper class). In the sample app we used autoHeightMode sizing for the player and gave explicit width and height for the wrapper element but this would need to be adapted depending on your CSS framework.
  • For each hero we added a HLS URL in mock-heroes.ts and enrich the Hero class with a src property in hero.ts
  • After that we just added some logic into the AppComponent to allow the player to be declared, appended and updated when needed. See app.component.ts file.
  • For further development you could want to move your player logic to a sub-component and to implement a custom interface for Radiant Media Player but this is not covered by this guide.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.