JW Player playlist only loads randomly in IE, works fine in FF every time

Question

The playlist loads every time in FF but only the first time in IE (6-8), after that only randomly. If I alert the error that's thrown I get "TypeError: playerReady is undefined".

My code looks good and obviously works since FF displays the playlist perfectly. I've got no idea how to solve this. Anyone?

<script type='text/javascript'>
        var so = new SWFObject('/UI/Flash/player.swf', 'ply', '<%=FlashWidth %>', '<%=FlashHeight %>', '9', '#ffffff'),
            playlistURL = '<%=PlaylistURL %>',
            imageURL = '<%=GetBackgroundImageUrl() %>';
            so.addParam('allowfullscreen', 'true');
            so.addParam('allowscriptaccess', 'always');
        if (playlistURL !== '') {
            so.addVariable('playlistfile', playlistURL);
            so.addVariable('playlist', 'none');
            so.addVariable('enablejs', 'true');
        }
        else {
            so.addVariable('file', '<%=FlashURL %>');
        }   

        if (imageURL.length > 0) {
         so.addVariable('image', imageURL);
        }
        so.write('preview<%=PlayerID %>');
    </script>

Answer 1

Hi Meow,

The playerReady function is called by the player once it's finished it's setup process. Do you happen to define that function and then set it to undefined? That might cause an error.

Also, what version of the player are you using?

so.addVariable('enablejs', 'true');

I don't belive that's been a flashvar since the 3.X player, which is no longer supported.

Best,

Zach

Developer, LongTail Video

Answer 2

Not sure how I solved it, but here is the final code that actually works:

HTML PAGE:

<script type='text/javascript'>
        var so = new SWFObject('/UI/Flash/player.swf', 'ply', '700', '345', '9', '#ffffff'),
            playlistUrl = 'XML-PLaylist',
            imageURL = '/ImageVault/Images/conversionFormat_2/id_1577/scope_0/ImageVaultHandler.aspx';
            so.addParam('allowfullscreen', 'true');
            so.addParam('allowscriptaccess', 'always');
            so.addParam('wmode', 'opaque');
        if (playlistUrl !== '') {
            so.addVariable('playlistfile', playlistUrl);
            so.addVariable('playlist', 'none');
            so.addVariable('controlbar', 'bottom');
            so.addVariable('backcolor', '0xDDE5FF');
            so.addVariable('frontcolor', '0x142864');
            so.addVariable('screencolor', '0xffffff');
            so.addVariable('enablejs', 'true');
            so.addVariable('overstretch', 'true');
        }
        else {
            so.addVariable('file', '');
        }   

        if (imageURL.length > 0) {
         so.addVariable('image', imageURL);
        }
        so.write('preview');
    </script>

And here's the JavaScript:

    try {

            var playlistReady = playerReady;
        } cat

ch (err) {
        //alert('1' + err);
    }

    playerReady = function(obj) {
        setTimeout(function() { checkPlaylistLoaded(obj) }, 1);
        try {
            playlistReady(obj);
        } catch (err) {
            //alert(err);
        }
    }

    function itemHandler(obj) {
        var item = obj['index'];
        var playlist = $("#" + obj['id']).next();
        var currentItem = 0;
        playlist.children().each(function() {
            if (currentItem == item) {
                $(this).addClass("playing");
            } else {
                $(this).removeClass("playing");
            }
            currentItem++;
        });
    }


    function checkPlaylistLoaded(obj) {
        //debugger;
        var player = document.getElementById(obj['id']),
            jsPlaylist = player.getPlaylist();
        if (jsPlaylist.length > 0) {
            var playlist = createPlaylist(obj);
            populatePlaylist(player, jsPlaylist, playlist);
            player.addControllerListener("PLAYLIST", "playlistHandler");
            player.addControllerListener("ITEM", "itemHandler");
            player.addControllerListener("STOP", "showPlaylist");
            player.addModelListener("STATE", "stateListener");
        } else {
            setTimeout(function() { checkPlaylistLoaded(obj) }, 150);
        }
    }

    function stateListener(obj) {
        if (obj.newstate === 'PLAYING') {
            hidePlaylist();
        }
        if (obj.newstate === 'PAUSED') {
            showPlaylist();
        }
    }

    function createPlaylist(obj) {
        var playerDiv = $("#" + obj['id']);
        playerDiv.after("<div class='jw_playlist_playlist'></div>");
        return playerDiv.next();
    }

    function hidePlaylist() {
        $('.jw_playlist_playlist').animate({ left: "-320px" }, 1000);
    }

    function showPlaylist() {
        $('.jw_playlist_playlist').animate({ left: "-10px" }, 1000);
    }

    function playlistHandler(obj) {
        var player = document.getElementById(obj['id']),
            jsPlaylist = player.getPlaylist(),
            playerDiv = $("#" + obj['id']),
            playlist = playerDiv.next();
        populatePlaylist(player, jsPlaylist, playlist);
    }

    function populatePlaylist(player, jsPlaylist, playlist) {
        playlist.empty();
        for (var i = 0; i < jsPlaylist.length; i++) {
            var jsItem = jsPlaylist[i];
            var alternate = "even";
            if (i % 2) {
                alternate = "odd";
            }
            playlist.append("<div id='" + getItemId(jsItem) + "' class='jw_playlist_item " + alternate + "'>" + dump(jsItem) + "</div>");
        }
        var playlistItem = 0;
        playlist.children().each(function() {
            var currentItem = playlistItem;
            $(this).click(function() {
                player.sendEvent("ITEM", currentItem);
            });
            playlistItem++;
        });
    }

    function getItemId(arr) {
        var output = '${link}',
            variables = getVars(output),
            j;

        for (j = 0; j < variables.length; j++) {
            var variable = variables[j],
                varName = variable.replace('${', '').replace('}', ''),
                value = arr[varName];
            if (!value) {
                value = '';
            }
            output = output.replace(variable, value);
        }
        return output;
    }

    function dump(arr) {
        var output = "<div class='jw_playlist_title'>${title}</div><div class='jw_playlist_description'>${description}</div>",
            variables = getVars(output),
            j;
        for (j = 0; j < variables.length; j++) {
            var variable = variables[j],
                varName = variable.replace('${', '').replace('}', ''),
                value = arr[varName];
            if (!value) {
                value = '';
            }
            output = output.replace(variable, value);
        }
        return output;
    }

    function dumpText(arr) {
        var dumped_text = "";
        if (typeof (arr) == 'object') {
            for (var item in arr) {
                var value = arr[item];
                if (typeof (value) == 'object') {
                    dumped_text += "<div class='" + item + "'>";
                    dumped_text += dump(value);
                    dumped_text += "</div>";
                } else {
                    dumped_text += "<div class='" + item + "'>" + value + "</div>";
                }
            }
        } else {
            dumped_text += arr + " (" + typeof (arr) + ")";
        }
        return dumped_text;
    }

    function getVars(str) {
        return str.match(/\$\{(.*?)\}/g);
    }