Play Azure Media Video in Angular

Hi All, Azure media service is a used for streaming video. In previous blog i wrote how to upload the video. Now in this blog we will see how to play video using angular.

For this you must have a azure media service video link. You can use this default url.

//amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest

Lets Start

PermalinkStep 1

Paste this in your index.html page.

<link href="//amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script>

PermalinkStep 2

After this install ng-amp.

npm install --save ng-amp

PermalinkStep 3

You need to download a file from azure website

https://amp.azure.net/libs/amp/latest/docs/

Open the link and click TypeScript Definations

downloaded azuremediaplayer.d.ts store in any folder below app

PermalinkStep 4

In tsconfig.json inside compilerOptions

 "typeRoots": [
      "node_modules/@types","src/app/videos"
    ]

azuremediaplayer.d.ts stored in src/app/videos

PermalinkStep 5

create a child component Video-play.component where we will write code to play video.

PermalinkStep 6

From Parent Component In TS file

var sanitizedVideoLink="Your Video URL"



 isMp4VideoComplete(event){
 if(event){
 console.log("Video Completed");
 }

 }

In HTML

  <app-video-play [data]="sanitizedVideoLink" (newItemEvent)="isMp4VideoComplete($event)"></app-video-play>

PermalinkStep 7

In Child Component-Video-play Component In HTML

<video id="vid1" class="azuremediaplayer amp-default-skin" controls width="450" height="250" data-setup='{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}' tabindex="0" >
        <!-- <source [src]=data type="application/vnd.ms-sstr+xml" /> -->
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

In TS File

export class VideoPlayComponent implements OnDestroy,OnChanges{



  @Input() data: string;
  @Output() newItemEvent = new EventEmitter<any>();
  constructor() { }
  ngOnChanges(changes: SimpleChanges): void {
    var myPlayer = amp('vid1')

    myPlayer.addEventListener('ended',()=> {
      this.finished=true;


            this.newItemEvent.emit(this.finished);
    })
     myPlayer.addEventListener('play',()=>{
    console.log("played");
    this.newItemEvent.emit(1);
  })
      myPlayer.src({
        type: "application/vnd.ms-sstr+xml",
        src: this.data
    });
  console.log(myPlayer.currentTechName());
  // myPlayer.autoplay(true);
  myPlayer.controls(true);


  }
   finished:boolean=false;

  ngOnDestroy(): void {

    var myPlayer = amp('vid1');
    myPlayer.dispose();
  }

I think this will help to play your video.

Thanks.