Is there a standard for using the Azure Media Player?

Question

I've been looking into Azure Media Services and I've been able to create a program that copies my video blob from my website storage to my media service storage account and create an asset/asset file from it. Then I've got it encoding for adaptive streaming.

The issue I'm having is on playback. I'm wanting to use the Azure Media Player as it shows great promise in detecting the environment and providing the correctly encoded video for streaming.

When I use the iframe approach (found here) it works, but I feel I'm losing some ability to customize -- also it's breaking in Safari on Mac.

<iframe class="video-preview" src="//aka.ms/azuremediaplayeriframe?url=[MANIFEST URL HERE]&autoplay=false" name="azuremediaplayer" allowfullscreen></iframe>

The other method (found here) utilizes the <video> tag along with css & js files put in the header.

Header code:

<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
    <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>

Video code:

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered video-preview" controls data-setup='{"nativeControlsForTouch": false}'>
        <source src="[MANIFEST URL HERE]" 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>

The <data-setup> attribute is supposed to activate the <video> tag and turn it into an Azure Media Player, but that's not happening for me.

So, my question is: what method is preferred/standard? I know that's difficult to pin down as it's still very young and is always changing, but just wanted to see what everyone else's experiences were.

Amit Rajput Amit Rajput · Accepted Answer · 2015-05-22T19:26:31

The iframe approach which is on the demo website is currently a proof of concept (see the warning on the page "Note: this embed code is for demo purposes only. Do not use in production"). It is meant to serve as a way to show that the player can work in an iframe. This will expand over time, but the flexibility of the iframe currently is limited to how you want to design the parameters.

In general, the approach you take depends on what you are trying to achieve (meaning depending on the level of flexibility you require). In general, the current recommended approach is to use the JS and CSS method directly on your page.

Now, for the issues you are having, it would be great to understand what you are seeing.

1.For the iframe issue on Safari on Mac, what are you seeing? I just tried the following on OS X Yosemite and Safari and it seems to be working fine

<iframe src="//aka.ms/azuremediaplayeriframe?url=%2F%2Famssamples.streaming.mediaservices.windows.net%2F91492735-c523-432b-ba01-faba6c2206a2%2FAzureMediaServicesPromo.ism%2Fmanifest&autoplay=false" name="azuremediaplayer" scrolling="no" frameborder="no" align="center" height="280px" width="500px" allowfullscreen></iframe>

2. Are you able to view the samples provided in the documentation? Here is the list of samples and specifically you should look at the basic videotag sample. You will need to make sure an source is added to the video tag for the auto-detect to work. If you are still

If you are still having issues, please reach out to [email protected]

Is there a standard for using the Azure Media Player?

1 Answers