Azure Media Player Silverlight后備無法正常工作

Question

我在項目中使用了azure媒體播放器，它將在asp.net頁面中播放多個自適應比特率流視頻，最好的部分是，它在html5和Flash中表現出色，但在Silverlight中會卡在微調器圖像上倒退。

以下是我使用的代碼。

我也嘗試獲取錯誤，但是它沒有擊中為錯誤添加的事件偵聽器代碼，但是在使用flash和html5的情況下，play和pause事件運行正常，但是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 <11的以下錯誤。

另外，我禁用了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）的評論

@Parshii當前，根據文檔，Azure Media Player不支持多實例播放。 盡管它可能適用於某些技術人員，但目前尚不是經過測試的方案。 請隨時將其添加到UserVoice論壇（ http://aka.ms/ampuservoice ）。

根據我的測試，它可以在html5和Flash中工作，但不能在Silverlight中工作，為了獲得Silverlight支持，我們可以根據rnevereverdies的評論嘗試使用iframe

單實例媒體播放器適用於所有技術。

Answer 1

@Parshii當前，根據文檔，Azure Media Player不支持多實例播放。 盡管它可能適用於某些技術人員，但目前尚不是經過測試的方案。 請隨時將其添加到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 = {}));