Everything from e-learning to OTT apps to product demos to live events now needs a great video experience. As Angular developers, we need a reliable, scalable, and simple solution that doesn’t require us to reinvent the wheel. Enter Mux gives us an entire infrastructure for video: automatic encoding, adaptive streaming, analytics, and to top it off, their web component – Mux Player. In this guide, you'll learn how to integrate Mux Player into your Angular application, step-by-step. This guide assumes that you know how to work with Angular and that you have a Mux account.
Why use Mux Player in Angular?
Let’s take a moment to understand why it makes sense to use Mux Player in Angular applications:
Key Benefits
-
Playback is simple – just use a playbackId
-
Mux takes care of adaptive streaming (HLS/DASH)
-
BUILT-IN UI controls and great accessibility
-
First-class analytics without having to include an extra SDK
-
Web-component based, so it plays nicely with Angular
-
Triggers poster frames, captions, and thumbnails
-
No more worrying about encoders, CDNs, manifests, and player libraries – they all come together in one package.
Step 1: Creating a Video Asset in Mux
-
Log in to Mux
-
Upload your video through Mux's dashboard or API
-
Wait for the processing to complete
-
Copy the playback id that was generated by Mux this will be used with the Mux player in Angular
Step 2: Installing the Mux Player
Installing the Mux PlayerThe Mux Player is available as a Web Component.
To install the Mux Player via the NPM package, execute the following command:
Code Example
npm install @mux/mux-player
Step 3: Registering the Web Component with Angular
As the Mux Player is a Custom Element you will need to enable and register Custom Elements with the Angular framework.In your Main Angular Module (e.g. app.module.ts). Your video should now play back successfully in your Angular Application.
Code Example
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule {}
Once this is done, you can use the <mux-player> tag directly in your templates. Replace YOUR_PLAYBACK_ID with your playback ID.
Code Example
<mux-player
playback-id="YOUR_PLAYBACK_ID"
controls
></mux-player>
Step 4: Listening to Player Events
Mux Player sends out standard media events, including play, pause, and completed. You can subscribe to the events the same way you would with native DOM events. This opens the door for integrating analytics, UI state, or business logic around playback events.
Code Example
<mux-player
playback-id="YOUR_PLAYBACK_ID"
(play)="onPlay()"
(pause)="onPause()"
(ended)="onEnded()"
controls
></mux-player>
Best Practices and Security
-
Never expose Mux API secrets in your Angular application.
-
only use playback identifiers.
-
Generate signed playback links for private content.
-
Obtain playback identifiers via your backend server rather than hard coding in production.
Conclusion
Due to the web component design and workflow based on playbackIds of Mux Player, integrating Mux Player into an Angular app is easy. With only a few minutes of configuration and no need for a separate implementation effort, you will have all the features of an adaptive streaming video-on-demand solution. Follow the steps outlined in this guide, implement the best practices listed below, and you will achieve a production-ready, scalable Video experience for users of your Angular application.
