Questions? Feedback? powered by Olark live chat software
Přeskočit navigaci

Announcing Azure Media Player

Publikováno dne 15 dubna, 2015

Program Manager, Azure Media Services

Reach the most popular devices with a single development experience

Azure Media Player is a free player solution built to playback media content from Microsoft Azure Media Services. Azure Media Player has the ability to reach a wide variety of browsers and devices with a simple HTML and JavaScript code. Azure Media Player is easy to set up and use. It only takes a few minutes to get playback of media content working from your Azure Media Services account.

What is Azure Media Player?

Azure Media Player utilizes industry standards, such as HTML5 (MSE/EME) to provide an enriched adaptive streaming experience. When these standards are not available on a device or in a browser, Azure Media Player automatically uses Flash and Silverlight as fallback technology. Regardless of the playback technology used, developers will have a unified JavaScript interface to access APIs. This allows for content served by Azure Media Services to be played across a wide-range of devices and browsers without any extra effort. Microsoft Azure Media Services allows for content to be streamed using DASH, Smooth Streaming and HLS streaming formats to playback content. Azure Media Player takes into account these various formats and automatically plays the best link based on the platform/browser capabilities. Microsoft Azure Media Services also allows for dynamic encryption of assets using PlayReady encryption or AES-128 bit envelope encryption. When appropriately configured with capable platforms, Azure Media Player allows for decryption of PlayReady and AES-128 bit encrypted content. Please note that Azure Media Player only supports media streams from Azure Media Services.

Try it now!

Visit http://aka.ms/azuremediaplayer to see a working, interactive, demo of the player.  See the power of Azure Media Player by accessing the site from your PC, Mac, and popular mobile devices! You can (1) try out the samples provided or (2) you can even playback your own URLs from Azure Media Services, by pasting the .ism/manifest file in the URL section and clicking “update player”. Once you have updated your configuration, (3) click update, and watch your media playing back! Azure Media Player demo page screenshot

Features

  • One player to reach your popular devices
    • On demand playback from Azure Media Services
    • Live playback from Azure Media Services
  • No more questioning which formats to use with which players on what devices
    • Automatic platform detection and playback of the best format for your device
    • HTML5 playback with auto-fallback to Flash, Silverlight and Native browser capabilities
  • Easily integration into your web and app solutions
    • Quickly get started with familiar HTML <video> tag
    • Unified JavaScript APIs for advanced development
  • Integrated content protection
    • Playback of AES-128 envelope encrypted content from Azure Media Services
    • Playback of PlayReady content from Azure Media Services with capable platforms
  • A fully featured media player with standard controls like play, pause, full screen, etc right out of the box

Click here for a full list of features.

Start using Azure Media Player today, FOR FREE!

Okay, you are now probably wondering, how much does it cost and how do I get access to it?  Azure Media Player is free to all Azure Media Services customers for use with their streamable content from their Media Services account. Azure Media Player is easy to set up. It only takes a few moments to get basic playback of media content from your Azure Media Services account.

Step 1: Add the CDN hosted player scripts to the <head> of your HTML page

Simply paste the following scripts in the <head> section of your HTML page.

<link href="//amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src= "//amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script>

As Azure Media Player evolves, there will be different versions available.  To get access to the latest version, simply change “1.3.0” in the above to the latest player version.  Player versions can be obtained here.

Step 2: Add the HTML video tag to your page

Next, simply use the <video> element as you normally would in the <body> of your HTML page. Make sure to add the following classes to the <video> element: "azuremediaplayer amp-default-skin amp-big-play-centered" which are necessary for the UI.  Non-standard HTML <video> element attributes can be added through the additional data-setup attribute containing options in a valid JSON object.

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

That’s it! You can now stream your videos on your webpage. Wasn’t that simple? To see a live example of the above, click here.

Behind the Scenes

You might be asking, I only specified a SMOOTH streaming url, how can it be playing everywhere? Azure Media Player utilizes its knowledge of Azure Media Services, and automatically rewrites the URL to correctly playback DASH, SMOOTH and HLS formats depending on the device/browser capabilities. That means no extra work for you!

Alternative Setup for dynamically loaded HTML using JavaScript

You can also dynamically load Azure Media Player using JavaScript.  This example below shows how to initialize the player with an existing video tag, but you can even dynamically load the video tag into the DOM and then initialize the player.

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"> </video>
<script>
  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"}, 
  ]);
</script>

Using the instance myPlayer, you can now access all the JavaScript APIs for a more advanced features. To see a live example of the above, click here.

Advanced setup of Azure Media Player and API docs

For more advanced scenarios, including content protection, check out the documentation. Samples are also provided to help with your development.

Providing Feedback and Feature Requests

Azure Media Player will continue to grow and evolve, adding more features and enabling more scenarios.  To help serve you better, we are always open to feedback, new ideas and appreciate any bug reports so that we can continue to provide an amazing service with the latest technologies. Remember to read through the documentation and check out the samples first; they are there to help make your development easier. To request new features, provide ideas or feedback, please submit to User Voice for Azure Media Player.  If you have and specific issues, questions or find any bugs, drop us a line at ampinfo@microsoft.com.

Sign up for the latest news and updates

Sign up here to never miss a release and to stay up to date with the latest that Azure Media Player has to offer.

Additional Resources