JQuery (maybe SWFObject) not doing what it's supposed to in IE 7.0.5730.13 or 8.0.6001.18702 or 8.0.7100.0, but works in 7.0.5730.11

Question

Hi guys, I have a website that has jQuery and SWFObject running on it. When the page loads, it sets a 2 second timeout then triggers an SWFObject instance to load a movie. When the movie finishes it's player callsback to JS to trigger another movie. The other movie loads fine and plays. When it's done playing, the second movie is also supposed to trigger another callback, but it doesn't. What I think is the problem is that on the second movie init, it is supposed to clear the previous element and reset it so that SWFObject can reuse it, and even though that is what happens in the DOM, SWFObject doesn't reuse the element. I think this is caused because jQuery still retains a hold of the element somehow even though it's removed from the DOM, which is throwing of IE when SWFObject is trying to reuse it.

I'm attaching my code, so maybe someone might be able to spot where it's not working, or if anyone has a suggestion on how to get jQuery to clear the element from both DOM and the jQuery object.

The code might seem a little unorganized, but this is my first time posting on Stack Overflow, so I don't know how to get it to post all the code properly formatted...

Thanks in advance!

var Shadow;

var ActorWrapper, VideoWrapper; var Actor, Video; var Navigation; var Flash, Random; var t;

$(document).ready(function () { if (jQuery.browser.msie && jQuery.browser.version <= 6) { $(".Body").supersleight(); };

t = window.setTimeout(function () {
    window.clearTimeout(t);

    Flash = $("#Flash");

    if (Boolean(Flash.val())) {
        Shadow = $("#Shadow");
        ActorWrapper = $("#ActorWrapper");
        Actor = $("#Actor");
        VideoWrapper = $("#VideoWrapper");
        Video = $("#Video");
        Random = $("#Random");
        Navigation = $(".Navigation");

        VideoWrapper.css({
            left: parseInt(($(document).width() - 400) / 2),
            top: parseInt(($(window).height() - 300) / 2)
        });

        IncomingActor();
    };
}, 2000);

});

var IncomingActor = function () { ActorWrapper.css({ display: "block", height: 325, left: parseInt((($(window).width() - 714) / 2) - 46), width: 180 });

swfobject.embedSWF("/Resources/Flash/Player.swf", "Actor", "180", "325", "9", null, {
    Path: "Amy-1.flv",
    Callback: "Vid",
    Buffer: 2,
    Width: 180,
    Height: 325
}, {
    play: true,
    loop: false,
    quality: "best",
    wmode: "transparent",
    swliveconnect: true,
    allowscriptaccess: "always"
});

Navigation.css({
    textAlign: "right"
});

};

var Vid = function () { $("#Actor").remove(); $("#ActorWrapper").html("");

VideoWrapper.css({
    display: "block"
});

Shadow.css({
    display: "block",
    height: $(document).height(),
    width: $(document).width()
}).animate({
    opacity: 0.6
}, 1000).click(function () {
    VideoWrapper.animate({
        opacity: 0
    }, 500);

    t = window.setTimeout(function () {
        window.clearTimeout(t);

        VideoWrapper.css({
            display: "none"
        });

        Shadow.animate({
            opacity: 0
        }, 500);

        t = window.setTimeout(function () {
            window.clearTimeout(t);

            Shadow.css({
                display: "none"
            });
        }, 500);
    }, 500);
});

swfobject.embedSWF("/Resources/Flash/Player.swf", "Video", "400", "300", "9", null, {
    Path: (Random.val() + ".flv"),
    Callback: "OutgoingActor",
    Buffer: 2,
    Width: 400,
    Height: 300
}, {
    play: true,
    loop: false,
    quality: "best",
    wmode: "transparent",
    swliveconnect: true,
    allowscriptaccess: "always"
});

VideoWrapper.animate({
    opacity: 1
});

Navigation.css({
    textAlign: "center"
});

};

var OutgoingActor = function () { ActorWrapper.css({ left: (parseInt(ActorWrapper.css("left")) + 10) });

VideoWrapper.animate({
    opacity: 0
}, 500);

t = window.setTimeout(function () {
    window.clearTimeout(t);

    VideoWrapper.css({
        display: "none"
    });

    Shadow.animate({
        opacity: 0
    }, 500);

    t = window.setTimeout(function () {
        window.clearTimeout(t);

        Shadow.css({
            display: "none"
        });
    }, 500);
}, 500);

swfobject.embedSWF("/Resources/Flash/Player.swf", "Actor", "180", "325", "9", null, {
    Path: "Amy-2.flv",
    Callback: "RemoveOutgoingActor",
    Buffer: 2,
    Width: 180,
    Height: 325
}, {
    play: true,
    loop: false,
    quality: "best",
    wmode: "transparent",
    swliveconnect: true,
    allowscriptaccess: "always"
});

Navigation.css({
    textAlign: "right"
});

};

Answer 1

aren't you better off just using a playlist, specified via an xml file?