如何在 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

它最初工作正常，当我们导航到任何页面并返回时它丢失了somehow.kindly请帮助我解决这个问题。谢谢！！

Answer 1

我在Angular2不知道怎么做，但是我在最新的Angular7有一个例子。您还应该使用最新版本的 AMP 播放器。 1.8 现在已经很老了。

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

如果有帮助请告诉我。

-约翰 D.

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

how to use Azure Media Services in an Angular 2+ apllications

azure

azure-media-services

angular

angular6