第一次写博客哎,不知道写点什么,回头一想写点最近遇到的前端方面的东西,以后可能重点还是在java后端,感谢你长期关注。
言归正传关于记录播放时长的问题: Flowplayer 自身没有带记录真实播放的时长的方法,所以要自己实现,网上有很多根据定时累加进行记录这也是一种方法,但是我觉得这种方法我也喜欢,所以自我实现了一种。 我是记录的场景是播放的时长和暂停、播放和拖动以及播放结束的动作进行监听,下面看看我的代码
实现代码:
1、开发环境
2、开发源码
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="author" content="odenpan“>
<!-- A minimal Flowplayer setup to get you started -->
<!--
include flowplayer JavaScript file that does
Flash embedding and provides the Flowplayer API.
-->
<script type="text/javascript" src="../flowplayer-3.2.13.min.js"></script>
<!-- some minimal styling, can be removed -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- page title -->
<title>Minimal Flowplayer setup</title>
</head><body>
<!-- widescreen container, 560x240 (clip dimensions) * 1.15, center splash -->
<div id="wowza" style="width:644px;height:450px;margin:0 auto;text-align:center">
</div>
<div id="test"></div>
<div id="test1"></div>
<script>
$f("wowza", "../flowplayer-3.2.18.swf", {
clip: {autoBuffering: true,
url: 'rtmp://10.10.154.1:80/video/L2x5YXBwL2FwcC91cGxvYWQvdmlkZW8vMTg5NDUvMTg3MjEvNDAvMDBlNzI2MTg3NTMxNGQ3NWI3OWI2Njc0NjMwZWU3NDgubXA0.mp4',
scaling: 'fit',
provider: 'hddn'
},
plugins: {
// rtmp插件
hddn: {
url: "../flowplayer.rtmp-3.2.13.swf",
// 需播放的地址
netConnectionUrl: 'rtmp://10.10.154.1:80/video/'
}
},
canvas: {
backgroundGradient: 'none'
}
});
//api = $(".flowplayer:eq(1)").data("flowplayer");
var elem = document.getElementById("wowza");
api = flowplayer(elem);
api.onSeek(function(event){
setStartTime();
document.getElementById("test1").innerHTML="位移:"+lastSecond+"--"+api.getTime();
//alert();
});
var startTime=0;//开始计时的时间
var totalTime=0;//总时间
var lastSecond=0;//用于位移的上一时间
api.onBeforeSeek(function(event){
countTime();
lastSecond=api.getTime() ;
});
api.onStart(function(event){
//开始事件
totalTime=0;
setStartTime();
//api.seek(60.000);
//alert(api.getTime());
});
api.onResume(function(event){
//继续事件
countTime();
//alert(api.getTime());
});
api.onPause(function(event){
//暂停事件
countTime();
//alert(api.getTime());
});
api.onFinish (function(event){
countTime();
//完成事件
//alert(api.getTime());
});
/**
*计算时长
*/
function countTime(){
var resoult=(api.getTime()-startTime);
if(resoult<0) resoult=0;
totalTime+=resoult;
setStartTime();
document.getElementById("test").innerHTML="共用时长:"+totalTime;
}
function setStartTime(){
startTime=api.getTime();
}
setInterval(function(){
countTime();
//10秒自动记录一次
},10000);
</script>
</body></html>
3、使用的时候需要注意
RTMP的URL是需要更改的。