当前位置: 代码迷 >> 综合 >> jw player 6 断点续播 seek()
  详细解决方案

jw player 6 断点续播 seek()

热度:81   发布时间:2024-01-20 02:58:01.0

在做项目的时候   客户提出要有断点续播的功能   就是 记住播放点 下次打开的时候 跳到记住的播放点  继续播放。

  项目用的 是的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的搭建 可以上网上搜  有教程


  相关解决方案