Hello All,
I have used jquery ui tab control and within that tab i placed JW Player(free silverlight player 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..
<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>
</html>
Blow is my Tab.js code
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 site
1. 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..