Azure 媒体播放器 Silverlight 回退不起作用

Question

我在我的项目中使用了 azure 媒体播放器，它将在 asp.net 页面中播放多个自适应比特率流式视频，最好的部分是，它在 html5 和 flash 中运行良好，但它会卡在 spinner Silverlight 后备中的图像。

下面是我使用的代码。

我也尝试过出错，但它没有命中为错误添加的事件侦听器代码，但播放和暂停事件在使用 flash 和 html5 的情况下工作正常，但 silverlight 后备根本不起作用。

<link href="https://amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script>
<div class="marginBlock">
<h3>
    <asp:Label ID="lblTitle" runat="server"><%=Title.ToString()%></asp:Label>
</h3>
<video id="<%=mediaPlayerID %>" class="azuremediaplayer amp-default-skin amp-big-play-centered">
    <p class="amp-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML 5 video.
    </p>
</video>
</div>
<p>
    <asp:Label ID="lblDescription" runat="server"><%=Description.ToString()%>
    </asp:Label>
</p>
<script>
 $(document).ready(function () {
    var playOptions = {
        "nativeControlsForTouch": false,
        techOrder: ['azureHtml5JS', 'flashSS', 'silverlightSS', 'html5'],
        autoplay: false,
        controls: true,
        width: '100%',
        height: '400',
        logo: { enabled: false },
        poster: "<%=ImageSelector%>"
    }

    var azurePlayer = amp('<%=mediaPlayerID%>', playOptions);
    azurePlayer.src([{
        src: "<%=VideoURL%>",
        type: 'application/vnd.ms-sstr+xml'
    }]);

    azurePlayer.addEventListener("error", function () {
        var errorDetails = azurePlayer.error();
        var code = errorDetails.code;
        var message = errorDetails.message;
        alert(errorDetails + ' ' + code + " " + message);
        if (azurePlayer.error().code & amp.errorCode.abortedErrStart) {
            console.log("abortedErrStart");
        }
        else if (azurePlayer.error().code & amp.errorCode.networkErrStart) {
            // MEDIA_ERR_NETWORK errors
            console.log("networkErrStart");
        }
        else if (azurePlayer.error().code & amp.errorCode.decodeErrStart) {
            // MEDIA_ERR_DECODE errors
            console.log("decodeErrStart");
        }
        else if (azurePlayer.error().code & amp.errorCode.srcErrStart) {
            // MEDIA_ERR_SRC_NOT_SUPPORTED errors
            console.log("srcErrStart");
        }
        else if (azurePlayer.error().code & amp.errorCode.encryptErrStart) {
            // MEDIA_ERR_ENCRYPTED errors
            console.log("encryptErrStart");
        }
        else if (azurePlayer.error().code & amp.errorCode.srcPlayerMismatchStart) {
            // SRC_PLAYER_MISMATCH errors
            console.log("srcPlayerMismatchStart");

        }
        else {
            // unknown errors
            console.log("unknown");
        }

    });

    azurePlayer.addEventListener('play', function () {
        console.log('play');
    });
    azurePlayer.addEventListener('pause', function () {
        console.log('pause');
    });
});

更新 注意到我收到了 IE

我还禁用了 firefox 中的 flash 并从 techOrder 中删除了 silverlight，然后它应该会触发错误事件侦听器，它没有触发。

这对我处理错误分析也很重要。 播放和暂停事件监听器工作正常。

2015 年 8 月 28 日更新： 修复了JS错误，这是因为上面链接中多次调用azure的cdn，将母版中的代码移动并仅加载一次，像chrome这样的浏览器可以轻松处理代码的重复性，而不是IE。

经过所有研究后，我迷失了为什么它不起作用。 因此添加了以下 JS，它将检查 Silverlight 和 Flash 并优雅地处理错误并更新我们的分析。

function getBrowserInformation() {
 var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return { name: 'IE ', version: (tem[1] || '') };
}
if (M[1] === 'Chrome') {
    tem = ua.match(/\bOPR\/(\d+)/)
    if (tem != null) { return { name: 'Opera', version: tem[1] }; }
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
return {
    name: M[0],
    version: M[1]
};};

function checkForAzureErrors() {
 function isSilverlightInstalled() {
    var isSilverlightInstalled = false;

    try {
        //check on IE
        try {
            var slControl = new ActiveXObject('AgControl.AgControl');
            isSilverlightInstalled = true;
        }
        catch (e) {
            //either not installed or not IE. Check Firefox/Safari
            if (navigator.plugins["Silverlight Plug-In"]) {
                isSilverlightInstalled = true;
            }
        }
    }
    catch (e) {
        console.log(e);
    }
    return isSilverlightInstalled;
}

function isFlashInstalled() {
    try {
        return Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
    } catch (exception) {
        return ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);
    }
}

function addErrorMessage() {
    $($("#mediaPlayer.marginBlock").find('h3')).text('Media is not supported on this browser or device.');
    $($("#mediaPlayer.marginBlock").find('video')).css('display', 'none');
    $($("#mediaPlayer.marginBlock").find('p')).css('display', 'none');
    $('.azuremediaplayer').css('display', 'none');
    ga("send", "event", "Videos", "error",
                        getBrowserInformation().name + getBrowserInformation().version +
                        ": is silverlight Installed " + isSilverlightInstalled() +
                        " and is Flash Installed " + isFlashInstalled());
}

function checkBrowser() {
    if ((getBrowserInformation().name === 'MSIE' || getBrowserInformation().name === 'IE')) {
        if (getBrowserInformation().version < 11) {
            addErrorMessage();
        }
    } else if (getBrowserInformation().name === 'Firefox') {
        addErrorMessage();
    }
}

if ((getBrowserInformation().name === 'MSIE' || getBrowserInformation().name === 'IE')) {
    if (getBrowserInformation().version < 9) { addErrorMessage() }
}

for (var key in amp.players) {
    if (amp.players.hasOwnProperty(key)) {
        if (isSilverlightInstalled()) {
            if (!amp.players[key].isReady_) {
                checkBrowser();
            }
        } else if (!isFlashInstalled()) {
            checkBrowser();
        }
    }
}}

在 document.ready 函数中页面加载 5 秒后调用此函数，给它足够的时间来加载并使 isReady_boolean 为 true。

 SetTimeout(function () { checkForAzureErrors(); }, 5000);

我还在等待某个天使来解决这个问题。

更新：部分修复

需要像旧版本一样添加xap参考，它会播放silverlight但有一个问题，它只有在每页有一个视频时才有效。

<script>
        amp.options.flashSS.swf = "http://amp.azure.net/libs/amp/1.3.0/techs/StrobeMediaPlayback.2.0.swf"
        amp.options.flashSS.plugin = "http://amp.azure.net/libs/amp/1.3.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
        amp.options.silverlightSS.xap = "http://amp.azure.net/libs/amp/1.3.0/techs/SmoothStreamingPlayer.xap"
</script>

---

已修复

来自Amit Rajput的cmets

@Parshii 目前，根据文档，Azure 媒体播放器不支持多实例播放。虽然它可能适用于某些技术，但目前还没有经过测试。请随时将其添加到 UserVoice 论坛 (http://aka.ms/ampuservoice)。

根据我的测试，它可以在 html5 和 flash 中运行，但不能在 Silverlight 中运行，对于 silverlight 支持，我们可以尝试使用来自 rnrneverdies 的 cmets 的 iframe

单实例媒体播放器适用于所有技术。

Answer 1

@Parshii 目前，根据文档，Azure 媒体播放器不支持多实例播放。虽然它可能适用于某些技术，但目前还没有经过测试。请随时将其添加到 UserVoice 论坛 (http://aka.ms/ampuservoice)。

Answer 2

这可能不是一个完整的答案，但可以帮助你。

我为 Azure Media Player 1.3.0 制作了以下插件，它记录了用户执行的所有活动以及错误。

设置为：

var mylogFunction = function(data) { console.log(data); };
var options = {
        techOrder: ["azureHtml5JS", "flashSS", "silverlightSS", "html5"],
        nativeControlsForTouch: false,
        loop: false,
        logo: { enabled: false },
        heuristicProfile: "Quick Start", //"High Quality", // could be "Quick Start"
        customPlayerSettings: {
            customHeuristicSettings: {
                preRollInSec: 4,
                windowSizeHeuristics: true
            }
        },
        plugins: {
          DebugLog: {
              logFunction: mylogFunction
          }
        }
      }; 

var amPlayer = amp("yourvideotagid", options);

插件代码：

var amp;
(function (amp) {

    amp.plugin('DebugLog', DebugLog);

    function DebugLog(options) {
        var player = this;

        var log = function (data) { console.log("Azure Media Player Log", data); }

        if (options) {            
            if (options['logFunction']) {
                log = options['logFunction'];
            }
        }

        init();

        function init() {
            player.ready(handleReady);
            player.addEventListener(amp.eventName.error, handleError);
        }

        function handleReady() {

            player.addEventListener(amp.eventName.loadedmetadata, handleLoadedMetaData);

            var data = {
                ampVersion: "1.3.0",
                appName: options['appName'],
                userAgent: navigator.userAgent,
                options: {
                    autoplay: player.options().autoplay,
                    heuristicProfile: player.options().heuristicProfile,
                    techOrder: JSON.stringify(player.options().techOrder)
                }
            };

            logData("InstanceCreated", 1, data);
        }

        function handleError() {
            var err = player.error();
            var data = {
                sessionId: player.currentSrc(),
                currentTime: player.currentTime(),
                code: "0x" + err.code.toString(16),
                message: err.message
            };

            logData("Error", 0, data);
        }

        function handleLoadedMetaData() {
            player.addEventListener(amp.eventName.playbackbitratechanged, handlePlaybackBitrateChanged);
            player.addEventListener(amp.eventName.playing, handlePlaying);
            player.addEventListener(amp.eventName.seeking, handleSeeking);
            player.addEventListener(amp.eventName.pause, handlePaused);
            player.addEventListener(amp.eventName.waiting, handleWaiting);
            player.addEventListener(amp.eventName.ended, handleEnded);

            if (player.audioBufferData()) {
                player.audioBufferData().addEventListener(amp.bufferDataEventName.downloadfailed, function () {

                    var data = {
                        sessionId: player.currentSrc(),
                        currentTime: player.currentTime(),
                        bufferLevel: player.audioBufferData().bufferLevel,
                        url: player.audioBufferData().downloadFailed.mediaDownload.url,
                        code: "0x" + player.audioBufferData().downloadFailed.code.toString(16),
                        message: player.audioBufferData().downloadFailed
                    };

                    logData("DownloadFailed", 0, data);
                });
            }

            if (player.videoBufferData()) {
                player.videoBufferData().addEventListener(amp.bufferDataEventName.downloadfailed, function () {

                    var data = {
                        sessionId: player.currentSrc(),
                        currentTime: player.currentTime(),
                        bufferLevel: player.videoBufferData().bufferLevel,
                        url: player.videoBufferData().downloadFailed.mediaDownload.url,
                        code: "0x" + player.videoBufferData().downloadFailed.code.toString(16),
                        message: player.videoBufferData().downloadFailed
                    };

                    logData("DownloadFailed", 0, data);
                });
            }

            var data = {
                sessionId: player.currentSrc(),
                isLive: player.isLive(),
                duration: player.duration(),
                tech: player.currentTechName(),
                protection: ((player.currentProtectionInfo() && player.currentProtectionInfo()[0]) ? player.currentProtectionInfo()[0].type : "clear")
            };

            logData("PresentationInfo", 1, data);
        }

        function handlePlaybackBitrateChanged(event) {
            logData("BitrateChanged", 1, eventData(event));
        }

        function handleWaiting(event) {
            logData("Waiting", 0, eventData(event));
        }

        function handlePlaying(event) {
            logData("Playing", 1, eventData(event));
        }

        function handleSeeking(event) {
            logData("Seeking", 1, eventData(event));
        }

        function handlePaused(event) {
            logData("Paused", 1, eventData(event));
        }

        function handleEnded(event) {
            logData("Ended", 1, eventData(event));
        }

        function logData(eventId, level, data) {

            var eventLog = {
                eventId: eventId,
                level: level,
                data: data
            };

            log(eventLog);
        }

        function eventData(event) {
          return {
              sessionId: player.currentSrc(),
              currentTime: player.currentTime(),
              isLive: player.isLive(),
              event: event.type,
              presentationTimeInSec: event.presentationTimeInSec,
              message: event.message ? event.message : ""
          };
        }
    }
})(amp || (amp = {}));