Angular 6 中的 Azure 媒体播放器

Question

我已经创建了一个基本设置：在 index.html

中添加了这些 cdns

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

这在我最初加载页面时非常有效，但是当我导航到其他地方并再次打开页面时，它在视频控件中显示黑屏，请帮助我解决这个问题。谢谢！！！

Answer 1

见this question。

当 window 关闭或组件被销毁时，在每个 amp 实例上调用 player.dispose()。

Angular 6 中的 Azure 媒体播放器

Azure media player in Angular 6

html

angular

azure-media-player