jw player 6 断点续播 seek()

最新推荐文章于 2022-11-28 17:03:39 发布

sessinsong

最新推荐文章于 2022-11-28 17:03:39 发布

阅读量5.2k

点赞数

分类专栏：视频播放器相关文章标签： cookie jwplayer

本文链接：https://blog.csdn.net/sessionsong/article/details/38458253

版权

视频播放器相关专栏收录该内容

3 篇文章 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服务器下就行了。