我试图获取Jwplayer的状态和时间,但当我试图查看两者的结果时,收到了一条"未定义"的消息。我使用的是Jwplayer 5.7。如果你能看看我的代码,看看我做错了什么,那就太棒了。此外,我对数据库的jquery.post()不会激发任何东西(可能是因为我没有得到状态)。在网络下的控制台日志中,我看不到被调用的文件。
最后一点要注意的是,当用户点击浏览器时,我正试图在帖子中将消息发送到数据库,但到目前为止,我还没能做到这一点。我想我可能走在正确的道路上,所以请提供任何进一步的指导。
提前谢谢。
<?php
$sessionid = 9;
$channelid = 2;
$ipaddress = get_client_ip();
function get_client_ip() {
$ipaddress = '';
if (isset($_SERVER['HTTP_CLIENT_IP']) )
$ipaddress = $_SERVER['HTTP_CLIENT_IP'];
else if( isset($_SERVER['HTTP_X_FORWARDED_FOR']) )
$ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
else if( isset($_SERVER['HTTP_X_FORWARDED']) )
$ipaddress = $_SERVER['HTTP_X_FORWARDED'];
else if(isset($_SERVER['HTTP_FORWARDED_FOR']) )
$ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
else if(isset($_SERVER['HTTP_FORWARDED']) )
$ipaddress = $_SERVER['HTTP_FORWARDED'];
else if(isset($_SERVER['REMOTE_ADDR']) )
$ipaddress = $_SERVER['REMOTE_ADDR'];
else
$ipaddress = 'UNKNOWN';
return $ipaddress;
}
?>
<!Doctype>
<HTML>
<head>
<!--<link rel="stylesheet" href="css/grid.css" type="text/css">-->
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript"></script>
<!-- Cll on slider.js here -->
</head>
<body>
<!--<div class="side_banner"><img src="images/logo1.png"/></div>-->
<div class="container">
<div class="grid4 omega">
<div class="banner">
<img src="images/banner.png"/>
</div>
<div id="video_container"></div>
<div id="timer"></div>
<div id="state"></div>
</div>
</div>
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("video_container").setup({
'modes': [
{type: 'flash', src: 'includes/jwplayer/player.swf'},
{type: 'html5'}
],
'height': 405,
'width': 720,
'autostretch':'false',
'wmode':'transparent',
'controls':false,
'autostart':false,
'file':'<?php echo json_encode($sessionid); ?>.flv',
'repeat':true,
});
var state = jwplayer("video_container").getState();
var time = jwplayer("video_container").getPosition();
document.getElementById('timer').innerHTML = 'The time is ' + time;
document.getElementById('state').innerHTML = 'The player is in a ' + state +' state';
if(state == "PAUSED"){
document.getElementById('timer').innerHTML = 'On pause, the time is ' + time;
}if(state == "IDLE"){
//try to push to database
try{
$.post(
'save_time.php',
{time:time,
ipaddress:<?php echo json_encode($ipaddress);?>,
channelid:<?php echo json_encode($channelid);?>,
sessionid:<?php echo json_encode($sessionid); ?>
},
function data(){
alert(data);
if(data == 'failed'){
alert(failed);
}
}
);
}catch(err){}
}
//take care of the exit
window.onbeforeunload = function(){
console.log('leeeeeeaaavvvving');
//alert('Are you sure you want to close out?');
var formData = {time:time, ipaddress:<?php echo json_encode($ipaddress); ?>, sessionid:<?php echo json_encode($sessionid); ?>, channelid: <?php echo json_encode($channelid); ?>};
$.ajax({
url:'save_time.php',
type:'POST',
data: formData,
async: false,
timeout: 2000,
success: function(data, textStatus, jqXHR)
{
//data - response from server
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown)
{
console.log('errrororrrrrrr');
}
});
}
</script>
<!--<div class="bottom_buttons">
<div class="button left">Start Over</div>
<div class="button right">Continue</div>
</div>-->
</body>
</html>
我能够解决这个问题,以防其他人也有同样的问题。这就是我在下面所做的:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="includes/jwplayer/jwplayer.min.js"></script>
<script type="text/javascript">
//create the general variables
var videoid = <?php echo json_encode($videoid);?>;
var ipaddress = <?php echo json_encode($ipaddress); ?>;
var channelid = <?php echo json_encode($channelid); ?>;
jwplayer("video_container").setup({
'modes': [
{type: 'flash', src: 'includes/jwplayer/player.swf'},
{type: 'html5'}
],
'height': 405,
'width': 720,
'autostretch':'false',
'wmode':'transparent',
'controls':false,
'autostart':false,
'file':'http://content.bitsontherun.com/videos/nPripu9l-60830.mp4',
'repeat':true,
'events': {
onPause :function(){
time = jwplayer("video_container").getPosition();
//get state
browsercloser(time);
},
onBuffer: function(){
time = jwplayer("video_container").getPosition();
browsercloser(time);
},
onPlay :function(){
time = jwplayer("video_container").getPosition();
browsercloser(time);
},
onIdle: function(){
time = jwplayer("video_container").getPosition();
try{
$.post("save_time.php",{time:time, ipaddress:ipaddress, videoid:videoid, channelid:channelid}, function(data){
if(data == 'good'){
alert('We are all good');
}else{
//
alert(failed);
}
});
}catch(err){}
}
}
});
function browsercloser(time){
//take care of the exit incase it happens on play or any other setting
window.onbeforeunload = function(){
console.log('leeeeeeaaavvvving');
//alert('Are you sure you want to close out?');
var formData = {time:time, ipaddress:ipaddress, videoid:videoid, channelid:channelid};
$.ajax({
url:'save_time.php',
type:'POST',
data: formData,
async: false,
timeout: 2000,
success: function(data, textStatus, jqXHR)
{
//data - response from server
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown)
{
console.log('errrororrrrrrr');
}
});
}
}
</script>
它适用于Chrome、Firefox、Internet Explorer和Opera。