Azure media player in Angular 6 - html

Question

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!!!

Answer 1

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