Ngx-azurevideo NPM

NgxAzurevideo

This library was generated with Angular CLI version 14.1.0.

Overview

This project uses Azure Media Player (AMP)

To use this component, you must first upload a video to media services, create a job, encode it, and get a streaming endpoint.

MSFT has a cool demo of the AMP player here AmpDEMO

AMP License

The default layout looks like this:

NgxAzurevideo

Using NgxAzurevideo

Step 1: Install the `ngx-azurevideo` package

npm install --save ngx-azurevideo

Step 2: Import NgxAzurevideoModule

import { NgxAzurevideoModule } from 'ngx-azurevideo';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxAzurevideoModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Use the module

<ngx-azurevideo 
src="//amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest"
[controls]="true"
[autoplay]="true"
[fluid]="false"
(complete)="complete($event)"
(play)="play($event)"
(pause)="pause($event)">
</ngx-azurevideo>

Input and Output

There are multiple exposed events for better monitoring and interactions.

  @Input() src: string = '';
  @Input() controls: boolean = true;
  @Input() autoplay: boolean = true;
  @Input() poster: string = '';
  @Input() width: number = 500;
  @Input() height: number = 500;
  @Input() fluid: boolean = true;
  @Input() skin: string = 'amp-flush';
                        // amp-default is other
  @Input() playbackSpeedEnabled: boolean = true;
  @Output() ended = new EventEmitter<any>();
  @Output() seeking = new EventEmitter<any>();
  @Output() playing = new EventEmitter<any>();
  @Output() complete = new EventEmitter<any>();
  @Output() timeupdate = new EventEmitter<any>();
  @Output() pause = new EventEmitter<any>();
  @Output() play = new EventEmitter<any>();
  @Output() resume = new EventEmitter<any>();
  @Output() error = new EventEmitter<any>();