Use this HTML5 video player sample for your hackathon projects

Azure Media Player

Last week Microsoft announced the new Azure Media Services video player. Here’s the biggest selling point for me:

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.

The key benefit (for me, at least) of using AMP

AMP can recognize which platform (iOS, Android, browser, etc) your user is on, and then scaffolding code to distribute the appropriate video file (ex: HLS on iOS, Smooth Streaming on MSFT platforms, DASH where it is supported). Now, the media player will handle all of that for you.

This saves me the trouble of having to write all of this fallback code myself. It’s important to note the bold text though — this player is specifically built for video content that takes advantage of our Media Services platform. I blogged about it in a tutorial series.

Uploading directly to blob storage

You do not need to upload your video to Azure Media Services directly. Instead, you can upload to a blob storage account (this is what I do), and then have your Azure Media Services account point to your blob storage.

The reason I do this is because I can more easily organize and manage my files in there, either by naming my blob of the folders within it.

Supported input formats for Azure Media Services

Various video, audio, and image file types can be uploaded to a Media Services account, with there being no restriction on the types or formats of files that you can upload using the Media Services SDK. However, the Azure Management portal restricts uploads to the formats that are supported by the Azure Media Encoder. Content encoded with the following video codecs may be imported into Media Services for processing by Azure Media Encoder:

  • H.264 (Baseline, Main, and High Profiles)
  • MPEG-1 MPEG-2 (Simple and Main Profile)
  • MPEG-4 v2 (Simple Visual Profile and Advanced Simple Profile)
  • VC-1 (Simple, Main, and Advanced Profiles)
  • Windows Media Video (Simple, Main, and Advanced Profiles)

Tutorial Series

 I put together a simple website sample that you can use for your own video projects. Just point it towards your Azure Media Services video using the tutorial I wrote, and you’re good to go.

If you are looking to have your video content from other services work well, I’d suggest looking into the Microsoft Player Framework.

The Microsoft Media Platform’s Player Framework is an open source video player which is available for Silverlight, HTML5, Windows Phone, Xbox, and Windows 8.

Here are some features of using the AMP:

  • Adaptive streaming and advanced playback heuristics via the IIS Smooth Streaming Client SDK for Windows 8
  • Closed captioning support via SMPTE-TT and TTML
  • Advertising standards support including VAST, MAST, and VPAID
  • Advanced DVR-style playback
  • Robust skinning and styling

Here’s a full list of the tutorials in this series:



3 thoughts on “Use this HTML5 video player sample for your hackathon projects

    • As long as the source material is recorded in stereo, then yes, you can load a video with two channel audio (stereo).

      If you’re asking if the user can change the audio stream on the fly with HTML5 video…. that I am not sure of.

  1. hi can you put an annotion tool in the amp? I’m a web dev I find amp hard to use, so maybe if you could help try to put and additional controller in my amp where you can annotate in the video currently playing?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.