通过 Javascript 调用的 Azure 媒体服务播放器因 URL.createObjectURL 不是函数而失败

Question

我正在尝试使用此博客 post 中的 Alternative Setup for dynamically loaded HTML using JavaScript 在我的应用程序中使用 Azure 媒体播放器来做一个简单的 POC。如下所述，尝试通过 javascript 加载时出现错误。

如果我简单地包含 javascript 文件并按照示例 "Step 2: Add the HTML video tag to your page" 它工作：

<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 动态加载它，如 "Alternative Setup for dynamically loaded HTML using JavaScript" 中所述，我收到错误

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 媒体播放器或使用 JavaScript[=17= 动态加载的工作示例]

在 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 的 "standard" 版本，如果它变得更具体，例如特定的 ckeditor 插件，我将更新它。

通过 Javascript 调用的 Azure 媒体服务播放器因 URL.createObjectURL 不是函数而失败

Azure Media Services Player invoked via Javascript fails with URL.createObjectURL is not a function

azure

media-player

azure-media-services