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

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