H5播放器Ckplayer增加记忆播放功能的JavaScript代码

CKplayer是一款功能强大的H5播放器，安装使用方法前面有介绍过了，传送门：

相关链接：超酷的开源H5视频播放器CKplayer

相关链接：JavaScript和JQuery中的Cookie即页面数据缓存基本用法

接下来给CKplayer增加记忆播放功能，让这款H5播放器的功能更实用。有两种方法，第一种方法是ckplayer播放器自带的记忆播放参数：

var videoObject = {
    container: '#player', //“#”代表容器的ID，“.”或“”代表容器的class
    ...
    seek:'Cookie',//指定跳转到Cookie记录的时间，使用该属性必需配置属性cookie
    cookie:'abcdefg',//cookie名称,请在同一域中保持唯一
    ...
};
		
var player=new ckplayer(videoObject);//初始化播放器

第二种方法是用cookie增加一个带时间提示框的记忆播放功能

第1步：在Ckplayer播放器页面JavaScript代码中加入Cookie和时间转换代码

//视频URL
var vid = "<?PHP echo $_GET['url'];?>";

//cookie
var cookie={'set':function(name,value,days){var exp=new Date();exp.setTime(exp.getTime()+days*24*60*60*1000);var arr=document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));document.cookie=name+'='+escape(value)+';path=/;expires='+exp.toUTCString()},'get':function(name){var arr=document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));if(arr!=null)return unescape(arr[2])},'put':function(urls){var cookie=urls.replace(/[^a-z]+/ig,'');var cookie=cookie.substring(cookie.length-32);return cookie}};

//将缓存已播秒数转换成标准时间格式
function formatSeconds(value){var theTime=parseInt(value);var theTime1=0;var theTime2=0;if(theTime>60){theTime1=parseInt(theTime/60);theTime=parseInt(theTime%60);if(theTime1>60){theTime2=parseInt(theTime1/60);theTime1=parseInt(theTime1%60)}var result=""+prefixInteger(parseInt(theTime),2)+""}else{var result="00:"+prefixInteger(parseInt(theTime),2)+""}if(theTime1>0){result=""+prefixInteger(parseInt(theTime1),2)+":"+result}if(theTime2>0){result=""+prefixInteger(parseInt(theTime2),2)+":"+result}return result}function prefixInteger(num,n){return(Array(n).join(0)+num).slice(-n)}

//定义缓存
var ck=cookie.get(vid);

第2步：在播放器页面追加一个时间提示框元素

$('#player').append('<div id="tips" class="hide"></div><style type="text/CSS">#tips{position:absolute; z-index:209910539; right:2%; bottom:10%; background: #000000a6; font-size:15px; color:#FFF; padding:8px; border-radius:4px;}#tips a{cursor:pointer}#go{color: #66CCCC}.hide{display:none}</style>');

第3步：设置ckplayer播放器

var videoObject = {
    container: '#player', //“#”代表容器的ID，“.”或“”代表容器的class
    ...
};

第4步：加入监听播放进度变化事件和监听播放器启动时读取缓存事件，并指令弹出记忆播放的时间提示框

第5步：加入时间提示框点击元素事件绑定

$('#tips').on("click",'#xx',function(e){
	player.play();
	$('#tips').addClass("hide")
});

$('#tips').on("click",'#go',function(e){
	player.seek(Math.round(ck));
	player.play();
	$('#tips').addClass("hide")
});

PS：如果是第一次打开此视频链接，则浏览器无该Cookie缓存，播放进度从头开始。下次播放同一视频链接时则读取缓存进度并跳转至该进度。