Hi friends,
i have a html file which display video using jw player with tabs.
when i put the video coding in another page(frame.htm) and call this page using iframe, tabs are disappeared.
here my video coding.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Car & Driving</title>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.equalheights.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.individual_section').hover(
function () {
$(this).css('cursor', 'pointer');
},
function () {
$(this).css('cursor', 'default');
}
);
});
</script>
<link rel='stylesheet' type='text/css' href='css/playerstyle.css' />
<script type="text/javascript" src="js/jwplayer.js"></script>
</head>
<body>
<div id='cardrive_player' align="center">
<div id="video_player" ></div>
<script type="text/javascript">
jwplayer('video_player').setup({
'id': 'carDrivePlayer',
'file': 'Admin/Video/f3caranddrivingcomvideos200new_audia1_2010mp4.mp4',
'controlbar': 'over',
'width': '100%',
'height': '350',
'levels': [{ bitrate: 700, file: 'Admin/Video/f3caranddrivingcomvideos200new_audia1_2010mp4.mp4', width: 700 }, { bitrate: 200, file: 'Admin/Video/f3caranddrivingcomvideos200new_audia1_2010mp4.mp4', width: 700 }, { bitrate: 2000, file: 'Admin/Video/f3caranddrivingcomvideos200new_audia1_2010mp4.mp4', width: 700}],
'provider': 'http',
'http.startparam': 'start',
'autostart': 'true',
'stretching': 'exactfit',
'plugins': {
hd: { file: 'Admin/Video/f3caranddrivingcomvideos200new_audia1_2010mp4.mp4', fullscreen: true }
},
'events': {
onTime: function (event) {
checkSectionIndicator(event.position, event.duration);
},
onReady: function () {
initSections();
},
onPlay: function () {
initSections();
}
},
'modes': [
{ type: 'flash', src: 'js/player.swf' },
{ type: 'html5' },
{ type: 'download' }
]
});
var section_array = [];
var next_tick = 1;
function checkSectionIndicator(position, duration) {
// console.debug('MOOSE: '+position+ ' : ' +next_tick + ' : ' + duration);
// console.debug(position + ' : ' + section_array[0] + ' : ' + section_array[1]);
if (position < section_array[0]) {
// This is a possible skip backwards
var section_times = "";
$('.a_section, .a_section_last').each(function (index) {
section_times = section_times + $(this).attr('title') + "|";
});
section_times = section_times.substring(0, section_times.length - 1);
section_array = section_times.split("|");
}
if (position >= section_array[1]) {
section_array.splice(0, 1);
} else {
$('.a_section, .a_section_last').removeClass('selected');
$('.a_section, .a_section_last').addClass('not_selected');
$(".a_section[title='" + section_array[0] + "']").addClass('selected');
$(".a_section_last[title='" + section_array[0] + "']").addClass('selected');
}
if (position > next_tick) {
var percent = 100 * position / duration;
// console.debug('GOOGLE: ' + parseInt(position) + ':' + parseInt(percent));
next_tick = position + 1; // Check again in a second
_gaq.push(['_trackEvent', "Audi A1", 'CD Play Percent', 'vehiclecontracts', parseInt(100 * (position / duration))]);
_gaq.push(['_trackEvent', "Audi A1", 'CD Play Seconds', 'vehiclecontracts', parseInt(position)]);
return false;
}
}
function initSections() {
var section_times = "";
$('.a_section, .a_section_last').each(function (index) {
section_times = section_times + $(this).attr('title') + "|";
});
section_times = section_times.substring(0, section_times.length - 1);
section_array = section_times.split("|");
var player_width = $('#mediaplayer').css('width').replace("px", "");
var width_adjust = -4;
if ($.browser.msie) {
width_adjust = 1;
}
$('#cardrive_player').css('width', player_width + 'px');
$('.section_list').css('width', player_width + 'px');
$('.dealer_email').css('width', (player_width - 2) + 'px');
$('.sample_email').css('width', ((300) - 2) + 'px');
$('.sample_email').css('margin-left', ((player_width / 2) - 150) + 'px');
$('.sample_email').css('margin-top', (-(player_width * 405 / 720) - 30) + 'px');
if (player_width < 550) $('.a_section, .a_section_last').css('font-size', '8px');
var section_label_width = ((player_width / section_array.length)) | 0;
$('.a_section').css('width', section_label_width + width_adjust + 'px');
var section_label_width_last = player_width - (section_label_width * (section_array.length - 1)) - section_array.length + width_adjust;
$('.a_section_last').css('width', section_label_width_last + 'px');
$('.sections').slideDown('fast');
}
function seekToSection(seekTime) {
// console.debug('Seek to: ' + seekTime);
jwplayer().seek(seekTime);
jwplayer().play(true);
}
$(document).ready(function () {
$('.individual_section').hover(
function () {
$(this).css('cursor', 'pointer');
},
function () {
$(this).css('cursor', 'default');
}
);
});
</script>
</div>
<div class="sections">
<ul class="section_list">
<li class='individual_section a_section' id='overview' title='0' onclick="seekToSection(2);">Overview </li>
<li class='individual_section a_section' id='background' title='16' onclick="seekToSection(17);"> Background </li>
<li class='individual_section a_section' id='driving' title='131' onclick="seekToSection(132);"> Driving Experience</li>
<li class='individual_section a_section' id='design' title='300' onclick="seekToSection(301);"> Design & Build</li>
<li class='individual_section a_section' id='market' title='490' onclick="seekToSection(491);"> Market, Model & Range</li>
<li class='individual_section a_section' id='cost' title='651' onclick="seekToSection(652);">Cost Of Ownership </li>
<li class='individual_section a_section_last' id='summary' title='723' onclick="seekToSection(724);">Summary </li>
</ul>
</div>
</body>
</html>
any one please help me to resolve this issue?
when i put this code directly in main page, it works fine.
but when i call this code using iframe, tabs are disappeared.
Regards
Lalitha
Submit an article or tip