第一次写博客哎，不知道写点什么，回头一想写点最近遇到的前端方面的东西，以后可能重点还是在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是需要更改的。
相关推荐
简单的视频播放demo，使用flowplayer插件，播放rtmp格式的视频，使rtmp格式的视频能够正常播放
适合做流媒体的同学, 可能直接将脚本嵌入html里, 做网页视频播放器. 视频传输协议为rtmp
优秀的FLV,RTMP在线播放器flowplayer源码
flowplayer3.2.8去LOGO及水印
flowplayer 加载视频
开源免费的网页播放视频代码。 如有问题请留言
js-flowplayer
rtmp_sample_player_flowplayer.rar
rtmp_flowplay_flowplayer.zip
NULL 博文链接：https://snv.iteye.com/blog/2182696
clip方法里的url：表示视频文件的真实地 址，autoPlay：表示是否自动播放，默认是true，autoBuffering：表示是否自动缓冲，即当视频文件设置为不自动播放时，播放器仍然 预先下载视频文件内容。
利用 flowplayer-3.2.13.min.js flowplayer.rtmp-3.2.13.swf flowplayer-3.2.18.swf 嵌入web实现网页上的流媒体播放器，可播放flv mp4格式,已测试 流媒体服务器用的RED5
将a标签的href属性指向要播放的视频地址，然后设置样式，宽度和高度，以及设置display:block，当然关键的是还要给a标签指定一个id，以便于JS调用。 当然你也可以只在html中指定一个DIV，然后由Javascript来控制播放...
Flowplayer 浏览器播放rtmp流(Flowplayer browser plays RTMP stream)
flowplayer案例，是一款html播放插件，支持MP4，flv，swf
Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。
flowplayer7，可在线播放rtmp资源的浏览器插件，前端同学不可错过
国外最权威的视频播放器，开放式源码。可支持FLV网络视频播放。
rtmp_flowplay_flowplayer_源码.zip