Mediaelement-Player - 增加带提示框的记忆播放功能

今天做一个给Mediaelement这款老牌H5播放器增加带提示框记忆播放功能的教程，用到JQuery的Cookie，将用户的播放时间记录在缓存里，再此观看统一视频时调用并快进至上次播放的时间进度，从而提升用户体验。

<link href="https://cdn.bootcdn.net/Ajax/libs/mediaelement/7.0.0/mediaelementplayer.CSS" rel="stylesheet">
<script src="https://cdn.bootcdn.net/Ajax/libs/mediaelement/7.0.0/mediaelement-and-player.js"></script>
<script type="text/JavaScript" src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>

<video src="https://www.18ma.cn/static/demo.mp4" width="320" height="240" type="video/mp4"></video>

2，HTML页面加入Cookie和时间转换代码

//视频URL
var vid= document.getElementById("video").src;

//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 cc = cookie.get(vid);
var ck = Math.ceil(cc)

3，初始化H5播放器，并加入启动时和播放时间变化监听，并将值传入cookie

此处为隐藏内容，请评论后查看隐藏内容，谢谢！

4，把时间提示框里面的关闭和继续按钮绑定点击事件

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