jQuery UI Dialog with an embedded video problem in IE

Question

I have a link which when clicked opens up a jQuery UI dialog, the data is loaded in the dialog through ajax which is an embedded flash video(using flowplayer). The probelm in ie is that when i click on the link the dialog opens and the videos starts to play and when i close the dialog, the video still continues to play. If i click on the link again the dialog opens up and the video plays but not from the start.

The main html file has the following code

<script type="text/javascript">
    $(document).ready(function(){
        var $dialog = $('<div> </div>');
        var dialogOpts = {
            title: "My Videos",
            modal: true,
            autoOpen: false,
            height: 500,
            width: 800
            };
        $('.videobox').one('click', function(){
            $dialog.load('data.html').dialog(dialogOpts);

        });             

        $('.videobox').click(function(event){       
            event.preventDefault();
            var url = event.target;     

            $dialog.dialog('open'); 
            return false;
            });
    })

</script>

Click me!

and the remote file has the following code

<div id="player" style="width:640px;height:360px;"></div>
<script>
$f("player", "flowplayer-3.2.2.swf", "004.flv");
     </script>

Everything works fine in FF, Safari and chrome, but in ie the video does not stop and continues to play even after the dialog is closed. I have spent a lot of time debugging but nothing seems to work. Cna anybody help please!!

Answer 1

On dialog close you need to call the pause and then the unload methods of the player.

Something like

$f().pause().unload();