在做项目的时候 客户提出要有断点续播的功能 就是 记住播放点 下次打开的时候 跳到记住的播放点 继续播放。
项目用的 是的jw player 播放器 （v6.9 ）
实现方式是 cookie记住播放时间点 playTime 下次播放的时候 取出播放点playTime 调用seek() 方法 跳到指定位置播放
实现过程中 出现的问题：
1. autostart 参数不能和seek()方法同时使用
2. 当播放的视频流是http 形式的流时 seek 不起作用 (5.0的支持 这个主要还是得看播放器版本)
3. 记住播放点 刚开始用的是没10s 写一次cookie 觉的这样太麻烦了 而且对机器的性能也有影响 后来通过搜索发现 可以用onbeforeunload 方法 在用户每次刷新或者关闭之前写cookie 这样就好多了
具体代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>断点播放 demo</title>
<style type="text/css">
body
{
text-align: center;
}
#myElement{
width: 680px;
height: 510px;
margin-top:50px;
margin-left:280px;
}
</style>
<script type="text/javascript" src="jwplayer-6.9/jwplayer.js" ></script>
</head>
<body>
<div id="big">
<div id="myElement">Loading the player...</div>
</div>
<script type="text/javascript">
jwplayer("myElement").setup({
// image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
// file: "http://content.jwplatform.com/videos/3XnJSIm4-kNspJqnJ.mp4",
//file:"rtmp://localhost/replay/mp4:2014-08-08_10-50-43/movie/movie",
file:"rtmp://localhost/replay/flv:2014-08-08_10-53-20/movie/movie",
// file : "http://localhost:8080/jwplayer/mp4720.mp4",
mute:true, // 静音
// autostart:true
});
var cookieName = "playTime";
var playTime = 0;
function rectime(){
playTime = jwplayer().getPosition();
setCookie(cookieName,playTime);
}
if (getCookie(cookieName)) {
playTime = getCookie(cookieName);
}
//alert(playTime);
jwplayer("myElement").seek(60); // seek 方法 不能和autostart同时使用 http 流不支持seek播放
//var timenow=setInterval('rectime()',2000);
window.onbeforeunload = rectime;
/******* 断点续播 COOKIE START ********************************************/
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
// alert(document.cookie);
}
//读取cookies
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
//删除cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
/******* 断点续播 COOKIE END ********************************************/
</script>
</body>
</html>
将代码拷贝下来 保存为一个html文件放到web服务器下就行了。
至于流媒体服务器fms的搭建 可以上网上搜 有教程