Azure Media Player Silverlight后备无法正常工作

Question

I have used the azure media player with my project, it will play multiple adaptive bit rate streamed videos in an asp.net page, the best part is, it is working superb in html5 and flash but it will get stuck at spinner image in silverlight fallback.

Below is the code I have used.

I have also tried to get errors but it is not hitting the event listener code added for errors, but the play and pause events are working fine where flash and html5 is used, but silverlight fallback is not working at all.

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

Updated Noticed I am getting following error for IE < 11.

Also I disabled the flash in firefox and removed the silverlight from techOrder, then it should hit the error event listener, it is not hitting.

This is also important for me to handle the analytics for error. Play and Pause event listener are working fine.

Update 8/28/2015: Fixed the JS error, it is because of multiple call to cdn of azure mentioned in link above, moved the code in master page and load it only once, browser like chrome handles duplicity of code easily but not IE.

After all the research I am lost why it is not working. So added the following JS that will check for Silverlight and Flash and gracefully handle the error and update our analytics as well.

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

This function is called after 5 second of page load in document.ready function, giving it enough time to load and make the isReady_boolean true.

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

Still I am waiting for some angel to resolve this issue.

Updates: Partially Fixed

Need to add the xap refrences like older version, it will play silverlight but there is a catch, it will only work if you have one video per page.

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

---

Fixed

As per comments from Amit Rajput

@Parshii Currently, as per the documentation, Azure Media Player doesn't support multi-instance playback. While it may work on some techs, it is not a tested scenario at this time. Please feel free to add it to the UserVoice forum ( http://aka.ms/ampuservoice ).

As per my testing it is working in html5 and flash but not Silverlight, for silverlight support we can try using iframes as per comments from rnrneverdies

Single Instance Media Player is working in all techs.

Answer 1

@Parshii Currently, as per the documentation, Azure Media Player doesn't support multi-instance playback. While it may work on some techs, it is not a tested scenario at this time. Please feel free to add it to the UserVoice forum ( http://aka.ms/ampuservoice ).

Answer 2

This may be not a complete answer, but could help you.

I made the following plugin for the Azure Media Player 1.3.0 which logs all the activity performed by the user and also the errors.

Set up it as:

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

Plugin Code:

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