O365 - Video - Javascript - Accessing Azure media / Office Videos using Azure Media Player

In the previous post, we saw some of the technical details of the Office 365 Video / PointPublishing site. We all know that the Office 365 videos can be embedded into the another site by embedding the Iframe.

Example: <iframe width=640 height=360 src='http://ift.tt/1CzPDtA' allowfullscreen></iframe>

The above html can be retrieved from the video page by clicking the embed link.

Here we will see how to access a video from the Azure media service uploaded from the Office 365 site and play it using the Azure Media Player. "Azure Media Player utilizes industry standards, such as HTML5, Media Source Extensions (MSE) and Encrypted Media Extensions (EME) to provide an enriched adaptive streaming experience. When these standards are not available on a device or in a browser, Azure Media Player uses Flash and Silverlight as fallback technology."

Before looking into the Azure Media Player implementation, we will look into some of the details of the "VideoEmbed.aspx" displays the Office 365 video.

• Takes the ChannelId and VideoId as a query string parameter.
• Gets the Azure Media Video Url.
  • Request: "http://<tenant>/portals/hub/_api/videoservice/Channels(guid'b6c48249-cd8a-43e9-bb94-7df7e8303033')/Videos(guid'bd9e2f2a-10b6-49fb-b6c0-774731f0bb7e')/GetPlaybackUrl(1)
  • GET
  • Response: 

  {   "d": {      "GetPlaybackUrl": "http://ift.tt/1Hq2AT8"
     }
  }
  

• Gets the Access Token to access the Video stored in the Azure media for streaming.
  • Request: "http://<tenant>/portals/hub/_api/videoservice/Channels(guid'b6c48249-cd8a-43e9-bb94-7df7e8303033')/Videos(guid'bd9e2f2a-10b6-49fb-b6c0-774731f0bb7e')/GetStreamingKeyAccessToken"
  • GET
  • Response:

  {   "d": {      "GetStreamingKeyAccessToken": "Bearer=urn%3amicrosoft%3aazure%3amediaservices%3acontentkeyidentifier=4d0300f2-bd5b-4b43-b8f2-ce1b9464686c&urn%3amicrosoft%3aazure%3amediaservices%3akeyacquisitionhostname=cvpram202m01.keydelivery.mediaservices.windows.net&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fnimbuslkgglobacs.accesscontrol.windows.net&urn%3aServiceAccessible=service&Audience=urn%3aNimbus&ExpiresOn=1436713660&Issuer=https%3a%2f%2fnimbuslkgglobacs.accesscontrol.windows.net%2f&HMACSHA256=Iz6HyLoB%2bknTuOOdzXqnVQ2t6dM%2fp9Y4a0EM3q8PNdo%3d"
     }
  }
  

• Initialise the Video Player. (Uses the Azure Media Player)
• Sends an signal to record that the video is viewed.
  • Request: http://<tenant>/portals/hub/_api/signalstore/signals
  • POST

  {"signals":[{"Actor":{"Id":null},"Action":{"ActionType":"ViewedVideo","UserTime":"2015-07-12T15:06:04.051Z","Properties":{"results":[]}},"Item":{"Id":"http://ift.tt/1Hq2Bqg","Properties":{"results":[]}},"Source":"PointVideo"}]}
  

• Increments the Video view count.
  • Request: http://<tenant>/portals/hub/_api/videoservice/Channels(guid'b6c48249-cd8a-43e9-bb94-7df7e8303033')/Videos(guid'bd9e2f2a-10b6-49fb-b6c0-774731f0bb7e')/IncrementViewCount
  • POST

So now, we will see how to implement the above using the custom Azure Media Player within a SharePoint page.

• Embed the HTML5 video element with the reference to the Azure Media Player script.

<!--*****START OF Azure Media Player Scripts*****--><script type="text/javascript" src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script type="text/javascript">
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf";
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf";
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap";
</script>
<!--*****END OF Azure Media Player Scripts*****-->
<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">
<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>

• Embed / Call the below script to Initialise the Video player.

function InitialiseVideo() {

    var spVideoUrl = "/portals/BBC/pVid/IMG_1779.MOV";

    GetAzureMediaUrl(spVideoUrl).then(

        function(responseMediaUrl) {

            return GetAzureMediaAccessToken(spVideoUrl).then(

                function(responseAccessToken) {

                    var azureMediaUrl = JSON.parse(responseMediaUrl.body).value;

                    var azureMediaAccessToken = JSON.parse(responseAccessToken.body).value;

                    SetAzureMediaPlayer(azureMediaUrl, azureMediaAccessToken);

                }

            );

        }

    );

}

function GetAzureMediaUrl(spVideoUrl) {

    var deferred = $.Deferred();

    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);

    executor.executeAsync({

        url: "http://ift.tt/1CzPEh9('" + spVideoUrl + "')/getplaybackurl(1)",

        method: "GET",

        headers: {

            "Accept": "application/json; odata=nometadata"

        },

        success: function(data) {

            deferred.resolve(data);

        },

        error: function(data, errorCode, errorMessage) {

            deferred.reject(data, errorCode, errorMessage);

        }

    });

    return deferred.promise();

}

function GetAzureMediaAccessToken(spVideoUrl) {

    var deferred = $.Deferred();

    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);

    executor.executeAsync({

        url: "http://ift.tt/1CzPEh9('" + spVideoUrl + "')/GetStreamingKeyAccessToken",

        method: "GET",

        headers: {

            "Accept": "application/json; odata=nometadata"

        },

        success: function(data) {

            deferred.resolve(data);

        },

        error: function(data, errorCode, errorMessage) {

            deferred.reject(data, errorCode, errorMessage);

        }

    });

    return deferred.promise();

}

function SetAzureMediaPlayer(azureMediaUrl, azureMediaAccessToken) {

    var myOptions = {

        "nativeControlsForTouch": false,

        autoplay: false,

        controls: true,

        width: "640",

        height: "400",

        poster: ""

    };

    var myPlayer = amp("azuremediaplayer", myOptions);

    myPlayer.src([{

        src: azureMediaUrl,

        type: "application/vnd.ms-sstr+xml",

        protectionInfo: [{

            type: "AES",

            authenticationToken: azureMediaAccessToken

        }]

    }]);

}

var scriptbase = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/";

$.getScript(scriptbase + "SP.Runtime.js",

    function() {

        $.getScript(scriptbase + "SP.js",

            function() {

                $.getScript(scriptbase + "SP.RequestExecutor.js", InitialiseVideo);

            }

        );

    }

);

• Screenshot:

Note: The above script uses the Office 365 Video Url (instead of the channel and video id's) to access the Azure Media and Initialise the Azure Media Player with the Azure Media Url and the Azure Media Player can be extended to call the other APIs using the event listeners.

by Balamurugan Kailasam via Everyone's Blog Posts - SharePoint Community