Question

我正在尝试使用此博客文章中的Alternative Setup for dynamically loaded HTML using JavaScript在我的应用程序中使用Azure Media Player进行简单的POC。我尝试通过javascript加载时遇到错误，如下所述。

如果我只是包含javascript文件并按照“第2步：将HTML视频标记添加到您的网页”示例，则可以使用：

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
    <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>

但是我尝试通过javascript动态加载它，如“使用JavaScript动态加载HTML的替代设置”中所述我收到错误

Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2

我在尝试什么：为了保持简单，我只是想让它加载视频以响应按钮点击。我有这个代码，它只是提供的示例的直接副本。

HTML：

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"> 
</video>

<button id="amsbutton" type="button">Load</button>

Javascript：

$("#amsbutton").on("click", function () {
        AMSVideo();
});

function AMSVideo() {

  var myOptions = {
      "nativeControlsForTouch": false,
      autoplay: true,
      controls: true,
      width: "640",
      height: "400",
      poster: ""
  };
    var myPlayer = amp("azuremediaplayer", myOptions);
    myPlayer.src([
      { src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
    ]);
}

Answer 1

我尝试使用一个小调整你的代码不使用jQuery，它似乎工作正常。此外，如果您遇到问题，请查看我们的samples page，其中包含使用<video>标记方法加载Azure Media Player或使用JavaScript动态加载的几个实际示例

在HTML页面的<head>中，添加Azure Media Player脚本：

<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
    amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
    amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
    amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>

在HTML页面的<body>中：

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>

JavaScript的：

function AMSVideo() {

        var myOptions = {
            "nativeControlsForTouch": false,
            autoplay: true,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        };
        var myPlayer = amp("azuremediaplayer", myOptions);
        myPlayer.src([
          { src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
        ]);
    }

如果您仍有疑问，请与ampinfo@microsoft.com联系以获取更多帮助。

Answer 2

我从未发现冲突到底是什么，但事实证明这与CKEDITOR 4.3.1不相容。当我注释掉我的ckeditor代码时：

        CKEDITOR.replace('text-content', {
            toolbar: 'Basic',
            uiColor: '#9AB8F3',
        });

问题消失了。幸运的是，无论它是什么，都在ckeditor的后期版本中得到了解决。我从他们的cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js"中删除了ckeditor，问题似乎消失了。由于这指向ckeditor的“标准”版本，如果事实证明它更像是特定的ckeditor插件，我会更新它。

通过Javascript调用的Azure Media Services Player失败，URL.createObjectURL不是函数

2 个答案: