Azure media player in Angular 6

I have created a basic setup: added these cdns in index.html

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

I read the html from an external file(which I only have access to) and inject it in div inner Html and set up the players that I have on that page:

@Component({
    selector: 'ss-training-page',
    template: '<div [innerHtml]="content"></div>',
    styleUrls: ['./training-page.component.scss']
})

export class TrainingPageComponent implements OnInit {

ngOnInit(): void {
    let loading = this.loadingService.addTask();
    this.route.paramMap
        .take(1)
        .subscribe(params => {
            let page: string = params.get("page") || "";

            if (page) {
                this.trainingService.getPageContent(page)
                    .take(1)
                    .subscribe(res => {
                        this.content = this.sanitizer.bypassSecurityTrustHtml(res);
                        this.setupPlayer();
                        this.loadingService.completeTask(loading);
                    })
            }
            else {
                this.loadingService.completeTask(loading);
            }
        },
            error => {
                this.notificationService.error("Error retrieving training page", error);
                this.loadingService.clearAllTasks();
            })
}


setupPlayer(): void {
        var allVideos = Array.from(document.querySelectorAll("video"))
        allVideos.forEach(v => {
            var player: amp.Player;
            player = amp(v.id);
            player.autoplay(false);
            player.controls(true);

            player.src([{
                src: document.getElementById(v.id).getElementsByTagName("source")[0].src,
                type: "video/mp4"
            }]);
        }) 
    };
}

here is an example of external html file:

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default b">
            <div class="panel-body">
                <span class="pull-right">
                    <button class="btn btn-square btn-primary" href="javascript:alert('This is an issue');"></button>
                </span>
                <div class="row">
                    <h1>This is a Test</h1>
                    <video id="vid1" class="azuremediaplayer amp-default-skin" width="640" height="400">
                        <source src="https://agstqaass.blob.core.net/asset-d7fd6f4e-26a7-453e-8e5e-204becae72a4/EditingABulletin.mp4?sv=2017-04-17" type="video/mp4" />
                    </video>
                </div>
                <div class="row">
                    <h1>This is a Test2</h1>
                    <video id="vid2" class="azuremediaplayer amp-default-skin" width="640" height="400">
                        <source src="https://agstqaass.blob.core.net/asset-d7fd6f4e-26a7-453e-8e5e-204becae72a4/EditingABulletin.mp4?sv=2017-04-17" type="video/mp4" />
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

this works perfectly when I load the page initially but when I navigate to somewhere else and I open the page again it shows blank black screen in video controls, kindly please help me on this. Thanks!!!

See this question.

Call player.dispose() on every amp instance when the window is closed or when the component is destroyed.