angular - 如何在 Angular 2+ 应用程序中使用 Azure 媒体服务

Question

我创建了如下所示的基本设置

在index.html中添加这些cdns

<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)",
 });

}

在我的 Angular src 文件夹中添加了 azuremediaplayer.d.ts

当我们导航到任何页面并返回时它会以某种方式丢失。请帮助我解决这个问题。谢谢!!

Answer 1

我不知道如何在 Angular 2 中做到这一点，但我在最新的 Angular 7 中有一个示例。 您还应该使用最新版本的 AMP 播放器。 1.8 现在已经很老了。

在这里查看我的 stackblitz 示例: https://stackblitz.com/edit/azure-media-player-ng7

请告诉我这是否有帮助。

-约翰·D.