Tag Archives: HTML5

Azure Media Services and SharePoint 2013 / 2016

This article will be about how easy is to consume Azure Media Services in SharePoint 2013 and SharePoint 2016. In the past I wrote another article about how to use an HTML5 video player in SharePoint 2010 and SharePoint 2013 (on-premises), but in my opinion there is a big difference between these two:

  • In the Azure Media Services and SharePoint 2010 / 2013 / 2016 configuration:
    • the main two advantages are:
      • robust playback experience
      • simplicity
    • the main disadvantage is the security
      In very short – you will use SharePoint as an interface to the media content, but the streamed media will not be hosted on-premises and the mechanisms to restrict the access to the published media content are rudimentary (the identity management is missing, but there are different combinations who can tick couple of security requirements).
  • In the “HTML5 video player in SharePoint 2010 and SharePoint 2013 (on-premises)” article I was refereeing to host everything (media files + HTML5 player) in SharePoint – basically not having any dependency hosted on internet.
    • the main advantage is the security
    • the main disadvantage is the playback experience (there are big chances to encounter playback interruptions due to the network bandwidth limitations and this setup doesn’t provide adaptive bitrate streaming).

 

Allow me to create the demand (the scenario) for when Azure Media Services and SharePoint will do a fit.

Let’s assume a multinational company has 30 offices across 4 continents, each office being connected to internet and having MPLS / VPN site to site connectivity. The company has the main IT servers infrastructure located on a single region. SharePoint 2013/2016 is used as main collaboration technology and is only accessible from the internal company network. The network bandwidth capability between the offices and the datacenter is good enough to support collaboration, but not strong enough for media streaming. However the internet connectivity of each office is fast enough to support media streaming.

The CEO of the company has an important message to send to all the employees and this will be handled asynchronously via a 20 minutes recorded video. The challenge for the IT department is to make sure that media content can be streamed and accessed anytime by the employees, must be hosted by a non-public infrastructure, the implementation must be done immediately and the video playback to run without interruptions.

 

Let’s see step by step how “complicated” is to cover this need using Azure Media Services and SharePoint 2013 / 2016

1. Provision the Azure Media Services

We will create a Media Services cloud service using the Azure Resource Manager model.

Azure_Media_Services_and_SharePoint_2013_2016_01

 

Create the resource group, select the region where this service to be hosted and define the associated storage account.

Azure_Media_Services_and_SharePoint_2013_2016_02

 

The next important step is to define the Streaming Endpoints for the newly create Azure Media Service.

Azure_Media_Services_and_SharePoint_2013_2016_03

 

Initially we will stop the Streaming endpoint so we can reconfigure to fit the needs presented in the above mentioned scenario.

Azure_Media_Services_and_SharePoint_2013_2016_04

 

We increased the number of Streaming units.

Azure_Media_Services_and_SharePoint_2013_2016_05

 

We also enable the CDN functionality for this Streaming Endpoint (more details here).

Azure_Media_Services_and_SharePoint_2013_2016_06

 

At the end of the process we will need to make sure we leave the Streaming Endpoint in the running state.

Azure_Media_Services_and_SharePoint_2013_2016_07

 

The next step is to upload the Media Asset (the recorded video file).

Azure_Media_Services_and_SharePoint_2013_2016_08

 

Be patient the upload takes time.

Azure_Media_Services_and_SharePoint_2013_2016_09

 

Once the media was uploaded, we should definitely not jump into publishing it. There are two different ways of delivering video content: progressive download and streaming. Each of it has pros and cons – a full explanation can be found here.

Usually the uploaded media is un-processed and not ready for streaming.

Azure_Media_Services_and_SharePoint_2013_2016_10

 

Trigger the asset encode.

Azure_Media_Services_and_SharePoint_2013_2016_11

Azure_Media_Services_and_SharePoint_2013_2016_12

 

Actually behind the scenes the uploaded media is processed and the same content will be encoded with different bitrates. This is to improve the playback experience. In other words the playback will adapt to what the connectivity and computing power the client has. The video quality will drop if the video is watched over a 3G connection (but still play without interruptions) on the phone. The video quality will increase (sharp, lots of details) if the video is watched while being connected to a high speed internet connection and using a higher resolution + high computing device.

Azure_Media_Services_and_SharePoint_2013_2016_13

Azure_Media_Services_and_SharePoint_2013_2016_14

 

Once the encoding job is completed, in the Media Assets we will be able to see the encoded asset. This is the asset that was encoded to support streaming.

FYI, it is not necessary to keep anymore the raw (initial uploaded) media.

Azure_Media_Services_and_SharePoint_2013_2016_15

 

A sneak peek of what’s this asset composed of.

Azure_Media_Services_and_SharePoint_2013_2016_16

 

Time to publish the encoded media asset.

Azure_Media_Services_and_SharePoint_2013_2016_17

 

Once done, we only need to copy the streaming URL (we will use it later when we place the video player in SharePoint).

Azure_Media_Services_and_SharePoint_2013_2016_18

 

2. Publish and consume the video via SharePoint 2013/2016

For both SharePoint 2013 and 2016 we have the same steps. Bellow I am providing the 2013 screens.

Azure_Media_Services_and_SharePoint_2013_2016_19

Let’s create a new Web Part Page.

Azure_Media_Services_and_SharePoint_2013_2016_20

We need to add a Script Editor web part.

Azure_Media_Services_and_SharePoint_2013_2016_21

Edit the snippet

Azure_Media_Services_and_SharePoint_2013_2016_22

 

Insert the code and replace [AZURE STREAMING URL] with the URL obtained in the Azure Media Services publishing phase

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

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="640" height="400" poster="" data-setup='{}' tabindex="0">
<source src="[AZURE STREAMING URL]" type="application/vnd.ms-sstr+xml" data-setup='{"streamingFormats": ["SMOOTH", "HLS-V3", "HLS-V4"]}' />
</video>

Azure_Media_Services_and_SharePoint_2013_2016_23

 

Save the changes.

Azure_Media_Services_and_SharePoint_2013_2016_24

Play the video.

Azure_Media_Services_and_SharePoint_2013_2016_25

 

 

In conclusion, very simple and efficient.

Please take in consideration the following:

  • go through the Azure Media Player code samples to find out how you can get the most of the player (include captions, provide different audio streams, DRM and AES).
  • in case you are not happy with the Azure Media Player, you can use JWPLAYER (JW Premium or higher licenses are required) to consume the Azure Media Services. I personally find both players strong enough to cover the majority of the needs.

 

 

Troubleshoot

In case you followed the above step by step and the Microsoft Azure Media Player doesn’t load (the “Error: Unsupported video type or invalid file path” message is displayed), please note this happens because the “Minimal Download Strategy” site feature is enabled -> who is preventing the “azuremediaplayer.min.js” to be loaded by the client.

Azure_Media_Services_and_SharePoint_2013_2016_26

 

The solution is to deactivate the “Minimal Download Strategy” site feature and the Azure Media Player will be loaded properly.

Azure_Media_Services_and_SharePoint_2013_2016_27