iOS 设备上的 Azure 媒体播放器答案

【问题标题】：Azure Media Player on iOS devicesiOS 设备上的 Azure 媒体播放器
【发布时间】：2017-04-06 21:04:16
【问题描述】：

我正在使用 Azure 媒体播放器在只能在移动设备中使用的 Web 应用程序中流式传输 O365 视频。它适用于 WP 和 Android，但播放器卡在 iOS 上。

这是我的代码

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

客户端

<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);
    }
}

我认为这个问题与视频编码有关。所以我尝试使用GetPlaybackUrl('0')（并避免下一个令牌请求），但播放器停止在 WP 和 Android 上运行，仍然无法在 iOS 上运行。

回调函数中的记录器没有告诉我一些有用的信息，我也尝试过更改技术顺序。

是否有控制台来管理视频编码以避免 AES 算法和解密令牌？因为this doc 解释说iOS 使用HTML5 技术不会请求令牌。我该如何解决？谢谢

【问题讨论】：

标签： ios azure office365 azure-media-services

【解决方案1】：

我找到了一种在 iOS 设备上重现视频的解决方法。我没有使用 REST API，而是在我的页面中放置了一个 iframe 元素并嵌入了视频。像这样（使用 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>

我从Office365 Video的视频页面中“嵌入”菜单的弹出窗口中获取此代码。

如果其他人知道另一种（更好的）方法，请告诉我。谢谢

【讨论】：