how to use Azure Media Services in an Angular 2+ apllications

Question

I have created a basic setup like below

added these cdns in index.html

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

streaming.component.html

 <video id="vid1" class="azuremediaplayer amp-big-play-centered amp-default-skin" crossorigin="anonymous" autoplay controls
         width="850" height="500">
        <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>

streaming.component.ts

ngAfterContentInit() {
 var myPlayer = amp('vid1');
 console.log(myPlayer.currentTechName(), 'texhname');
 myPlayer.autoplay(false);
 myPlayer.controls(true);
 myPlayer.src({
     type: "application/dash+xml",
     src: "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest(format=mpd-time-csf)",
 });

}

added azuremediaplayer.d.ts in my angular src folder

it's working fine initially when we navigate to any page and come back it got lost somehow.kindly please help me on this. Thanks!!

Answer 1

I don't know how to do it in Angular 2, but I have an example in the latest Angular 7. You should also be using the latest version of the AMP player. 1.8 is pretty old now.

Check out my stackblitz example here: https://stackblitz.com/edit/azure-media-player-ng7

Let me know if that helps.

-John D.