Silverlight player not working in jquery ui tab

Silverlight player not working in jquery ui tab

Hello All,

I have used jquery ui tab control and within that tab i placed JW Player(free silverlight player http://www.longtailvideo.com/players/jw-wmv-player/ ). Now let me describe my problem...

I have four tab page 1. Player 2. Participant 3. Tag 4. Share. I placed JW player in first tab page. And other tab pages will display some data on demand.. i mean when you navigate to 2nd tab page it will load participant's data and so on.. Now scenario is when player is loaded and you are playing one file and if you navigate to any other tab player will stop playing your movie/audio file in FF, Chrome and in safari. But in IE 7+ its working fine..(I didnt check in IE6). I mean player will continue playing your file if you navigate to another tab.

Here is my code..

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript" src="Scripts/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="Scripts/Silverlight.js"></script>
        <script type="text/javascript" src="Scripts/wmvplayer.js"></script>
       
        <script type="text/javascript" src="Scripts/jquery.ui.core.js"></script>
        <script type="text/javascript" src="Scripts/jquery.ui.widget.js"></script>

        <script type="text/javascript" src="Scripts/jquery.ui.tabs.js"></script>
        <script type="text/javascript" src="Scripts/Tab.js"></script>
       
        <link type="text/css" href="redmond/ui.all.css" rel="stylesheet" />
        <link type="text/css" href="redmond/demos.css" rel="stylesheet" />
       
        <script type="text/javascript">
        $(function() {
            if($('#RecordingDetailContainer')[0] == null)
            {
                var gridContainer = $("<div style='width: 90%; height: 570px; position:absolute; left:5%; top:22px;' id='RecordingDetailContainer' ></div>");
                gridContainer.appendTo('#playeraa');
            }
            else
                $('#RecordingDetailContainer').html('');  
           
            Tab.init('RecordingDetailContainerTab', 'RecordingDetailContainer');
            Tab.add('Tab0', 'Player', '');
            Tab.add('Tab1', 'Participant', '');
            Tab.add('Tab2', 'Tag', '');
            Tab.add('Tab3', 'Share', '');
           
            Tab.tabs.bind('tabsshow', TabSelectEvent);
            CreateVideoPlayer();
            $('#Tab0').attr('IsLoaded', 'true');
        });
        function TabSelectEvent(event, ui)
        {
            switch (ui.index)
            {
                case 0:
                    CreateVideoPlayer();
                    break;
                case 1:
                    break;
                case 2:                                        
                    break;
                case 3:
                    break;  
                case 4:
                    break;      
            }
        }
        function CreateVideoPlayer()
        {
            if($('#Tab0').attr('IsLoaded') == 'false')
            {
                var src = 'Player/wmvplayer.xaml';
                var cfg = {
                    file:'Player/video.wmv',
                    width:'320',
                    height:'180'
                };
                var ply = new jeroenwijering.Player($('#Tab0')[0],src,cfg);
                $('#Tab0').attr('IsLoaded', 'true');
            }
        }
        </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="playeraa"></div>
        </form>
    </body>









































































Blow is my Tab.js code

  1. var Tab = {
       
        tabs: null,

        init: function (id, containerControlID) {
            var tabs = $("<div class='tabs-bottom'></div>").append('<div id="'+ id + '" ></div>');
            $('#' + containerControlID).append(tabs);

            var list = $('<ul></ul').append('<li><a href="http://forums.silverlight.net/forums/AddPost.aspx#"></a></li>');
            tabs.append(list);

            tabs.tabs();

            // remove the dummy tab
            tabs.tabs('remove', 0);
            tabs.hide();

            this.tabs = tabs;
           
            $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *").removeClass("ui-corner-all ui-corner-top").addClass("ui-corner-bottom");
        },

        add: function (tab_id, tab_name, tab_content) {
            if (this.tabs != null) {
                if (this.tabs.css('display') == 'none') {
                    this.tabs.show();
                }
               
                //add content and set tab height
                var data = $('<div id="'+tab_id+'" IsLoaded="false"></div>').append(tab_content).css({'height': 500, 'width': 500, 'overflow': 'auto'});
                this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
                //this.tabs.tabs('select', '#' + tab_id);
            } else {
                alert('Tabs not initialized!');
            }
        },
       
        getSelectedTabDiv: function () {
            if (this.tabs != null)
            {
                if(this.tabs.tabs('option', 'selected') >= 0)
                    return $('#Tab' + this.tabs.tabs('option', 'selected'));
                else
                    return null;
            }
            else {
                alert('Tabs not initialized!');
            }
        }

    };





















































You can download other required files from below sites

1. http://jqueryui.com/demos/tabs/

2. http://www.longtailvideo.com/players/jw-wmv-player/

I also made my silverlight player project which plays file from local drives and placed instead of JW palyer but same thing is happening.. My goal is to continue playing audio/video file if user navigates to any other tab.. Can anybody check this and provide me any way to achieve this ?

Thanks in advance..