首页 文章

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

提问于
浏览 次
0

我正在尝试使用本博客文章中的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" },
    ]);
}
azure media-player azure-media-services

2 回答

  • 0

    我尝试使用一个小调整你的代码不使用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获取更多帮助 .

    回复于
  • 1

    我从来没有发现冲突究竟是什么，但事实证明这与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插件，我会更新它 .

    回复于

相关问题