CODEWITHSUNDEEP
azuremedia-playerazure-media-services
Joel
Joel

Reputation: 647

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

I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.

If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works: 

<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>

But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error

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

What I'm trying: To keep it real simple I'm just trying to get it to load a video in response to a button click. I have this code in place which is just a direct copy of the example provided.

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" },
    ]);
}

Upvotes: 0

Views: 2117

Answers (2)

Joel
Joel

Reputation: 647

I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code: 

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

the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.

Upvotes: 0

Amit Rajput
Amit Rajput

Reputation: 483

I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript

in the <head> of the HTML page, add the Azure Media Player scripts:

<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>

In the <body> of the HTML Page:

<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" },
        ]);
    }

If you are still having difficulty, please reach out to [email protected] for more assistance.

Upvotes: 1

Related Questions