Question

I have been working on a mediaplayer with playlist using flowplayer in combination with jQuery tabs. But I run into issues with IE where when I switch tabs it still keeps playing the video in the closed tab. This does not happen in firefox or chrome, only in IE.

You can checkout my demo here

I was browsing the flowplayer forums and someone posted a solution, but the persons solution was not using jQuery UI, instead he was using jQuery Tools. So I am trying to figure out how to implement it in jQuery UI. I did not get any help from the flowplayer forums, so I thought I’d try in here.

This is the code the person used to supposedly solve the issue in jQuery Tools (forum post) I tried this using jQuery Tools and it didn’t work completely.

incomplete jQuery Tools solution:

$(function() {
    var api = $(".items").tabs(".tabs-cont").data("tabs");

    api.onClick(function(index) {
       var video = api.getCurrentPane().find("div.video"),
       videoCont = video.find("div.video-cont");
       videoCont.detach();
       video.append(videoCont);
    });
});

html:

<div class='video'>
   <div class="video-cont"><object>FLASH EMED HERE</object></div>
</div>

Answer 1

I was able to figure something out on my own. Don’t know if there is a better way of doing it, but it did solve my problem.

$( "#tabs" ).tabs({

    show: function(e, ui) {
        $.cookie( "tab-name", ui.panel.id );
    },

    select: function (e, ui) {
        var tab = "#" + $.cookie ( "tab-name");
        var video = $( tab ).find("div.media-container"),
            flow = video.find("div.flow-container").attr('id');
        $f(flow).stop();
    }
});