科尔多瓦天蓝色媒体播放器答案

【问题标题】：cordova azure media player科尔多瓦天蓝色媒体播放器
【发布时间】：2015-12-17 00:28:31
【问题描述】：

如何在 cordova 应用程序中实现 azureMediaPLayer？

我尝试了网站上的教程/说明：http://amp.azure.net/libs/amp/latest/docs/，但我无法让它发挥作用。

我把

<link href="http:////amp.azure.net/libs/amp/1.5.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src= "http://amp.azure.net/libs/amp/1.5.0/azuremediaplayer.min.js"></script>

在我的 index.html 标题中

然后我把

<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>
    <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
    <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>

在html中

它只是一个黑屏，没有控件，没有加载，也没有来自调试的错误消息。

我尝试了从角度控制器运行的手动示例，但这只是告诉我 amp 未定义。

var myPlayer = amp('vid1', { /* Options */
        "nativeControlsForTouch": false,
        autoplay: false,
        controls: true,
        width: "640",
        height: "400",
        poster: ""
    }, function() {
          console.log('Good to go!');
           // add an event listener
          this.addEventListener('ended', function() {
            console.log('Finished!');
        }
      }
);
myPlayer.src([{ 
    src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", 
    type: "application/vnd.ms-sstr+xml"
}]);

有人做过这个吗？我开始研究 dash.js，但我也无法让它工作......

【问题讨论】：

对错误结果的更正：它是黑屏，因为内容没有加载到视频元素，控件是可见的，但它是默认的 html5 控件，所以有些东西告诉我天蓝色的东西没有正确加载.. .

标签： angularjs cordova azure media-player

【解决方案1】：

Cordova 具有将可以在应用程序中使用的域列入白名单的概念。您需要将 AMP 脚本的域和流式定位器的域列入白名单。这里有更多信息：https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html

【讨论】：