Html Azure媒体播放器在Angular 6中
我创建了一个基本设置: 在index.html中添加了这些CDNHtml Azure媒体播放器在Angular 6中,html,angular,azure-media-player,Html,Angular,Azure Media Player,我创建了一个基本设置: 在index.html中添加了这些CDN <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> 我从一个我只能访问的外部
<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>
我从一个我只能访问的外部文件中读取html,并将其注入到div内部html中,然后设置我在该页面上拥有的播放器:
@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"
}]);
})
};
}
以下是外部html文件的示例:
<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>
当我最初加载页面时,这项功能非常有效,但当我导航到其他地方并再次打开页面时,视频控制中会显示空白黑屏,请帮助我。
谢谢 见
当窗口关闭或组件损坏时,请在每个amp实例上呼叫player.dispose。非常感谢,伙计!