iOS设备上的Azure Media Player

Question

I'm streaming O365 videos using Azure Media Player in a web app that must be used only in mobile devices. It works with WP and Android, but the player stuck on iOS.

This is my code

client.DefaultRequestHeaders.Add("Authorization", "Bearer " + bearer);
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

            var response = await client.GetAsync($"{url}/GetPlaybackUrl('1')");
            var content = await response.Content.ReadAsStringAsync();
            var firstVal = JsonConvert.DeserializeObject<VideoToken>(content);

            response = await client.GetAsync($"{url}/GetStreamingKeyAccessToken");
            content = await response.Content.ReadAsStringAsync();
            var secondVal = JsonConvert.DeserializeObject<VideoToken>(content);

Client Side

<video id="newsVideoAMP" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>

var initVideoPlayer = function (playbackUrl, streamingKeyAccessToken) {
    try {
        var myOptions = {
            "nativeControlsForTouch": false,
            controls: true,
            autoplay: false,
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS", "silverlightSS", "html5"],
            logo: { enabled: false }
        }
        newsVideoPlayer = amp("newsVideoAMP", myOptions,
            function () {
                this.addEventListener(amp.eventName.error, function () {
                    window.alert('error');
                    console.log('Error: amp init');
                    var errorDetails = newsVideoPlayer.error();
                    window.alert(errorDetails);
                    var code = errorDetails.code;
                    var message = errorDetails.message;
                    $("#log").append("<li><span>code: " + code + " - detail: " + message + "</span></li>')");
                });
            });
        newsVideoPlayer.src([
            {
                "src": playbackUrl,
                "type": "application/vnd.ms-sstr+xml",
                "protectionInfo": [
                    {
                        "type": "AES",
                        "authenticationToken": streamingKeyAccessToken
                    }
                ]
            }]);
    }
    catch (err) {
        console.log(err);
    }
}

I think the issue is related to video encoding. So I tried to use GetPlaybackUrl('0') (and avoid the next token request), but the player stops to work on WP and Android and still not work on iOS.

The logger in callback function doesn't tell me some useful and I have also tried to change the tech order.

Is there a console to manage video encoding in order to avoid the AES algorithm and the decrypt token? Because this doc explain that iOS works with HTML5 tech will no token request. How can I solve? Thanks

Answer 1

I found a workaround to reproduce videos on iOS devices. Instead of use REST API I put an iframe element in my page with the video embedded. Like this (using MVC Razor):

var url = "{YourWebsiteUrl}/portals/hub/_layouts/15/VideoEmbedHost.aspx?chId={YourChannelId}&vId={YourVideoId}&width=853&height=480&autoPlay=false&showInfo=false";

<iframe width=853 height=480 id="videoframe" src="@url" allowfullscreen data-spresponsive style='position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; max-width: 100%;'></iframe>

I get this code from the popup of "embed" menu in the video page of Office365 Video.

If somebody else knows another (and better) method, please let me know. Thanks